function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aakanksha SinghAakanksha Singh 

Modal in Lightning Component

Hello Everyone,
I would like to know about creating popup/modal through lightning component.
Thanks
Regards

 
Best Answer chosen by Aakanksha Singh
sfdcMonkey.comsfdcMonkey.com
hi Aakanksha Singh

try this code for Salesforce lightning modal in your component but make sure you are use slds css style files as static resources for access this modal classs
  1. <div aria-hidden="false" id="yourId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open" style="display:none;">
  2.    <div class="slds-modal__container">
  3.      <div class="slds-modal__header">
  4.       
  5.       <h2 id="header43" class="slds-text-heading--medium">Add New Record.</h2>
  6.       <button class="slds-button slds-button--neutral" onclick="{!c.hideModal}">X</button>  
  7.      </div>
  8.     <div class="slds-modal__content slds-p-around--medium">
  9.       <div>
  10.          <p>  Modal boday  </p>
  11.       </div>
  12.     </div>
  13.       <div class="slds-x-small-buttons--horizontal">
  14.         <p> footer</p>
  15.       </div>
  16.   </div>
  17.      
  18.  </div>
  19.        <button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Open Modal</button>


  js controller 
  1.  
  2.  ({
  3.     showModal : function(component, event, helper) {
  4.     
  5.         document.getElementById("newClientSectionId").style.display = "block";
  6.     
  7.     },
  8.     
  9.     hideModal : function(component,event, helper){
  10.     
  11.        document.getElementById("newClientSectionId").style.display = "none" ;
  12.    }
  13. })

thanks
Please mark it as solved if this helps you so that it will make for others as a proper solution :)
 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi Aakanksha Singh

try this code for Salesforce lightning modal in your component but make sure you are use slds css style files as static resources for access this modal classs
  1. <div aria-hidden="false" id="yourId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open" style="display:none;">
  2.    <div class="slds-modal__container">
  3.      <div class="slds-modal__header">
  4.       
  5.       <h2 id="header43" class="slds-text-heading--medium">Add New Record.</h2>
  6.       <button class="slds-button slds-button--neutral" onclick="{!c.hideModal}">X</button>  
  7.      </div>
  8.     <div class="slds-modal__content slds-p-around--medium">
  9.       <div>
  10.          <p>  Modal boday  </p>
  11.       </div>
  12.     </div>
  13.       <div class="slds-x-small-buttons--horizontal">
  14.         <p> footer</p>
  15.       </div>
  16.   </div>
  17.      
  18.  </div>
  19.        <button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Open Modal</button>


  js controller 
  1.  
  2.  ({
  3.     showModal : function(component, event, helper) {
  4.     
  5.         document.getElementById("newClientSectionId").style.display = "block";
  6.     
  7.     },
  8.     
  9.     hideModal : function(component,event, helper){
  10.     
  11.        document.getElementById("newClientSectionId").style.display = "none" ;
  12.    }
  13. })

thanks
Please mark it as solved if this helps you so that it will make for others as a proper solution :)
 
This was selected as the best answer
Aakanksha SinghAakanksha Singh
Hey,
User-added image
I'm getting this error when i tried to run the code.
Can you help with this??
Thanks.
Aakanksha SinghAakanksha Singh
I Figured it out. Thanx for the help.
sfdcMonkey.comsfdcMonkey.com
hello aakansha can you share your code of component and jsController, so i check this  :)
Aakanksha SinghAakanksha Singh
hi,
id="yourId" in the container div should be id="newClientSectionId", thats all, i've figured it out.
thanx :)
sfdcMonkey.comsfdcMonkey.com
Opss.it's my copy-past mistake ..i Apologize :)
Miguel PaguioMiguel Paguio
LIFE SAVER THANK YOU SO MUCH @piyush_soni
sfdcMonkey.comsfdcMonkey.com
sounds good :)@Miguel Paguio  you can find more post related to lightning component on http://sfdcmonkey.com
sfdcMonkey.comsfdcMonkey.com
checkout this
User-added image
http://www.sfdcmonkey.com/2017/04/15/modal-box-lightning-component-salesforce/
@taani.ax1426@taani.ax1426
Great! I saw when you clicked "Like and Close" then on the top it is showing "monkey-blog---- says:", cant we remove that? For users it is more like an error. Many Thanks !