如何在Salesforce Lightning組件中創建模態/彈出框

📖摘要

---

今天分享下 ——如何在Salesforce Lightning組件中創建模態/彈出框 的一些基本知識，歡迎關注！

大家好，今天我們將在 Salesforce Lightning 組件中創建一個自定義模態/彈出窗口。我們可以使用客戶端 javaScript 控制器顯示/隱藏模型框

---

🌂分享

---

Salesforce Lightning Experience中的模態是什麼？

基本上，模態/彈出框用於在應用程序上方的薄片/圖層中顯示內容。此實例用於各種情況，例如記錄的創建或編輯，以及不同類型的消息傳遞和嚮導。

Lightning Experience中的模態框如下所示：

此自定義閃電模式與S1移動應用程序不兼容

demoModal.cmp [閃電組件代碼]

<aura:component>
    <!--use boolean attribute for Store true/false value,
    make default to "false" so modal box are not display on the load of component. 
    --> 
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    
    <!--Use "slds-m-around_xx-large" class to add standard X-Large padding to the component--> 
    <div class="slds-m-around_xx-large">
        
        <lightning:button variant="brand"
                          label="About SFDCmonkey.com"
                          title="About SFDCmonkey.com"
                          onclick="{! c.openModel }" />
        <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->   
        <aura:if isTrue="{!v.isOpen}">
 
            <!--###### MODAL BOX Start######--> 
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- ###### MODAL BOX HEADER Start ######-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About Sfdcmonkey.com</h2>
                    </header>
                    <!--###### MODAL BOX BODY Part Start######-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>The goal of this blog is to provide tips and tricks/workarounds for salesforce developer and admins.
                            Many of us face the same issues and have the same questions when using and implementing Salesforce.
                            As a community of users and developers, it is important for us to share our experiences.
                            I try to reach out to other users and help the Salesforce community in general.
                            Much of this blog will focus on Lightning(code &amp; config.) but I will also
                            cover some of the more basic topics in salesforce.
                            </b>
                        </p>
                    </div>
                    <!--###### MODAL BOX FOOTER Part Start ######-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" 
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand" 
                                          label="Like and Close"
                                          title="Like and Close"
                                          onclick="{! c.likenClose }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            <!--###### MODAL BOX Part END Here ######-->
            
        </aura:if>
    </div>
</aura:component>

demoModalController.cmp [Js控制器代碼]

({
   openModel: function(component, event, helper) {
      // for Display Model,set the "isOpen" attribute to "true"
      component.set("v.isOpen", true);
   },
 
   closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
      component.set("v.isOpen", false);
   },
 
   likenClose: function(component, event, helper) {
      // Display alert message on the click on the "Like and Close" button from Model Footer 
      // and set set the "isOpen" attribute to "False for close the model Box.
      alert('thanks for like Us :)');
      component.set("v.isOpen", false);
   },
})

TestApp.app

<aura:application extends="force:slds">
    <c:demoModal/>
<!-- here c: is org. namespace prefix-->
</aura:application>

結果：

---

🎉最後

• 更多參考精彩博文請看這裏：《陳永佳的博客》

• 喜歡博主的小夥伴可以加個關注、點個贊哦，持續更新嘿嘿！