Model Popup in Salesforce Lightning

Model Popup is very important in some places of CRM application to show records, show messages. I have used this model dialog box in lightning community portal.

Let us see how to create model dialog box using lightning. We would be required SLDS library. so download and refer it in your base component.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">

<aura:attribute name="openModal" type="boolean" default="false"/>

<aura:attribute name="header" type="string" default="Portal Notification"/>

<aura:attribute name="information" type="string" default="Hello"/>
<aura:attribute name="param" type="boolean" default="false"/>

<aura:method name="handleOpenModal" action="c.handleOpenModal"/>
<aura:registerEvent name="onClose" type="c:ModalDialogCloseEvt"/>

<div class="slds-m-around--xx-large">
<aura:if isTrue="{!v.openModal}">
<!--Modal Box Start-->
<div role="dialog" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
    <div class="slds-modal__header green">
    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCloseModal}">
X
       <span class="slds-assistive-text">Close</span>
   </button>
   <h1 class="slds-text-heading--medium">{!v.header}</h1>
</div>

<!--Modal Box Header-->
<div class="slds-modal__content slds-p-around--medium">
  <center> 
  <p>
    <b>
     {!v.information}
    </b>
  </p>
  </center>
  </div>
 <!--Modal Box Button-->
  <div class="slds-modal__footer">
  <aura:if isTrue="{!v.param}">
     <lightning:button class="slds-button slds-button--brand" onclick="{!c.handleOkModal}" label="Ok"/>
     </aura:if>
    <lightning:button class="slds-button slds-button--brand" onclick="{!c.handleCloseModal}" label="Cancel"/>
   </div>
  </div>
 </div>
<div class="slds-backdrop slds-backdrop--open"></div> 
</aura:if>
</div>
</aura:component>

Model Controller JS File:

({
    handleOpenModal: function(component, event, helper) {
        //For Display Modal, Set the "openModal" attribute to "true"
        component.set("v.openModal", true);
    },
   	setOKVisibility: function(component, event, helper,param) {
        componet.set("v.param",param);
    },
    handleCloseModal: function(component, event, helper) {
        //For Close Modal, Set the "openModal" attribute to "fasle"  
        component.set("v.openModal", false);
    },
    handleOkModal:function(component, event,helper) {
        helper.fireEvent(component, true, null);
        component.set("v.openModal", false);
        
    }
})

Model Helpr JS File:

({
	closeMe : function(comp, event, helper)  { 
        comp.destroy();
	},
	fireEvent : function(component, confirmResult, inputResult) {
        var evt = component.getEvent("onClose");
	        evt.setParams({
	        dialogType: 'Information',
	        confirmResult: true,
	        inputResult: null,
	        context: {},
	    });
        debugger;
	    evt.fire();
	}
})

Model Style File:

.THIS .white svg {
    color:#FFF;
    fill: rgb(255, 255, 255);
}
.THIS .red
{
    background: red;
    border: 3px solid red;
    color: white;
    float: left;
    text-align: center;
    padding-top: 5px;
}

.THIS .green
{
    background: green;
    border: 3px solid green;
    color: white;
    float: left;
    text-align: center;
    padding-top: 5px;
}