Skip to main content
Salesforce

Return to Question

added 226 characters in body
Source Link
Eric
Eric
  • 54.4k
  • 11
  • 104
  • 196

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?

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?

Source Link
Eric
Eric
  • 54.4k
  • 11
  • 104
  • 196

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