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?
- Simply use javascript to set the div to display none?
- Add a class to hide it
- Is there a concept similar to data-toggle etc?
- Anything else
Trying to make the page work in both Classic and Lex