2

I have not been able to find much about this so I just wanted to see if anyone knows the proper way to close a lightning notification displayed in regular VF page using the Salesforce Lightning Design System:

Given the following:

VF PAGE

<apex:page showHeader="false" sidebar="true" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>
  <title>My Example Page</title>
    <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>


<body>    

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds">    

    <!-- MASTHEAD -->
    <div class="slds-page-header">
        <p class="slds-text-heading--large slds-m-bottom--small slds-text-align--center">
          My header
        </p>
    </div>
    <!-- / MASTHEAD -->    

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">    

        <div class="slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture" role="alert">
            <span class="slds-assistive-text">Info</span>

            <button class="slds-button slds-button--icon-inverse slds-notify__close">
                <svg aria-hidden="true" class="slds-button__icon">
                        <use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/action-sprite/svg/symbols.svg#close')}"></use>
                </svg>
                <span class="slds-assistive-text">Close</span>
            </button>
            <h2>Base System Alert</h2>
        </div>

    </div>

</div>


</body>
</html>


</apex:page>

When the user clicks on the "X" close icon how should we close the notification?

  1. Simply use javascript to set the div to display none?
  2. Add a class to hide it
  3. Is there a concept similar to data-toggle etc?
  4. Anything else

Trying to make the page work in both Classic and Lex

For a Modal, It has classes with the --open adding and removing them seems to show and hide the modal but is that the correct way?.

In this case i Guess just calling .hide() with jQuery and using a conditionally rendered outputPanel to show it would be the best way?

Improve this question

1 Answer 1

Reset to default
1

SLDS (as a seperate thing from Lex) is currently "BYOJS" -- there's no data-toggle or hiding classes baked in, you need to bring all of those yourself, using whatever javascript framework you're using on the page. Someday, Lightning Components MIGHT give us some of that, but you're not working with them anyway! Whatever javascript library you're using on the page, you should use to close the modal in the idiomatic fashion for that library.

Improve this answer
8
  • 1
    But "How" was the question. Assuming jQuery there is no relationship to the SLDS modal so calling .close() does not work.... I believe the answer is as simple as removing the class slds-fade-in-open or using .hide() but I wanted to make sure..
    – Eric
    Commented Oct 25, 2015 at 17:44
  • Assuming jQuery, just hide()ing the modal should be perfectly fine.
    – Christian Carter
    Commented Oct 25, 2015 at 17:48
  • Your sample markup isn't implementing .slds-modal-backdrop though which is key to the consistency of the Lightning design principles. Once you are using that, your javascript should remove the --open modifier class too.
    – Christian Carter
    Commented Oct 25, 2015 at 17:49
  • Using .hide() does not equate to being able to use .show() to show it. So it is not consistent. That is what I am getting at for the core of my question. And I just removed the JS cause it was for the Modal I am working on not the notification in the question (sorry) it was just an example
    – Eric
    Commented Oct 25, 2015 at 17:51
  • So Basically your answer is that we have to find what causes each component to be open (hopefully documented I think) and the figure out a way to implement those features - It may be to remove or add a class, it may be .hide() or .show() but it will all depend on the component. Does that sum it up?
    – Eric
    Commented Oct 25, 2015 at 17:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .