Create a modal or popup box in salesforce Lightning
I am going to demonstrate salesforce lightning popup model. This model is very simple here I used aura: if condition to show and hide the model.
LightningPopup.cmp
<aura:component >
<aura:attribute name="openmodel" type="boolean" default="false"/>
<div class="slds-m-around--xx-large">
<button class="slds-button slds-button--brand" onclick="{!c.openModel}">Pop up Model</button>
<aura:if isTrue="{!v.openmodel}">
<div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
<div class="slds-modal__container">
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
X
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="header99" class="slds-text-heading--medium">Some Inspiration never dies</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<p><b>Stay true to yourself, yet always be open to learn. Work hard, and never give up on your dreams, even when nobody else believes they can come true but you. These are not cliches but real tools you need no matter what you do in life to stay focused on your path.
</b>
</p>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Cancel</button>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
</div>
</aura:component>
---------------------------------------------------------------------------------------------
LightningPopup.controller
({
openModel: function(component, event, helper) {
component.set("v.openmodel", true);
},
closeModel: function(component, event, helper) {
component.set("v.openmodel", false);
}
})
------------------------------------------------------------------------------
Preview it using salesforce Lightning App:
<aura:application extends="force:slds">
<c:LightningPopup />
</aura:application>
