Messages can be displayed in modals and popovers. Modals display a dialog in the foreground of the app, interrupting a user’s workflow and drawing attention to the message. Popovers display relevant information when you hover over a reference element.
Include one
<lightning:overlayLibrary aura:id="overlayLib"/> tag in the component that triggers the messages, where aura:id is a unique local ID. Only one tag is needed for multiple messages.Modals
A modal blocks everything else on the page until it’s dismissed. A modal must be acknowledged before a user regains control over the app again. A modal is triggered by user interaction, which can be a click of a button or link. The modal header, body, and footer are customizable. Pressing the Escape key or clicking the close button closes the modal.
Modals inherit styling from modals in the Lightning Design System.
Here’s an example that contains a button. When clicked, the button displays a modal with a custom body.
<aura:component>
<lightning:overlayLibrary aura:id="overlayLib"/>
<lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>
</aura:component>
This client-side controller displays the modal. To create and display a modal, pass in the modal attributes using
component.find('overlayLib').showCustomModal(), where overlayLib matches the aura:id on the lightning:overlayLibrary instance.({
handleShowModal: function(component, evt, helper) {
var modalBody;
$A.createComponent("lightning:button", {
"aura:id": "findableAuraId",
"label": "Press Me",
"onclick": cmp.getReference("c.handlePress")
},
function(content, status) {
if (status === "SUCCESS") {
modalBody = content;
component.find('overlayLib').showCustomModal({
header: "Application Confirmation",
body: modalBody,
showCloseButton: true,
cssClass: "mymodal",
closeCallback: function() {
alert('You closed the alert!');
}
})
}
});
}
})
================
Popovers
Popovers display contextual information on a reference element and don’t interrupt like modals. A popover can be displayed when you hover over or click the reference element. Pressing the Escape key closes the popover. The default positioning of the popover is on the right of the reference element.
Popovers inherit styling from popovers in the Lightning Design System.
Here’s an example that contains a button and a reference div element. When clicked, the button displays a popover. The popover also displays when you hover over the div element.
<aura:component>
<lightning:overlayLibrary aura:id="overlayLib"/>
<lightning:button name="popover" label="Show Popover" onclick="{!c.handleShowPopover}"/>
<div class="mypopover" onmouseover="{!c.handleShowPopover}">Popover should display if you hover over here.</div>
</aura:component>
This client-side controller displays the popover. Although this example passes in a string to the popover body, you can also pass in a custom component like in the previous modal example. Any custom CSS class you add must be accompanied by the
cMyCmp class, where c is your namespace and MyCmp is the name of the component that creates the popover. Adding this class ensures that the custom styling is properly scoped.({
handleShowPopover : function(component, event, helper) {
component.find('overlayLib').showCustomPopover({
body: "Popovers are positioned relative to a reference element",
referenceSelector: ".mypopover",
cssClass: "popoverclass, cMyCmp"
}).then(function (overlay) {
setTimeout(function(){
//close the popover after 3 seconds
overlay.close();
}, 3000);
});
}
})
