[SalesForce] VisualForce Lightning – Proper way to close alert / notification

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?

Best Answer

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.

Related Topic