如何在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>

结果：

🎉最后

• 更多参考精彩博文请看这里：《陈永佳的博客》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！