如何在 Salesforce Lightning 应用程序中打开/关闭模式？答案

【问题标题】：How to open/close a modal in Salesforce Lightning App?如何在 Salesforce Lightning 应用程序中打开/关闭模式？
【发布时间】：2017-05-29 01:56:50
【问题描述】：

我看到了这个关于modals的文档。

但是没有从按钮或引导程序之类的东西唤醒模式的公会线。

你们知道我该怎么做吗？

【问题讨论】：

标签： salesforce salesforce-lightning

【解决方案1】：

在 Salesforce 闪电中，我们没有任何内置功能来打开/关闭模态，这个对我有用。

组件

<div aura:id="exampleModal"  class="slds-modal slds-fade-in-open hideDiv" aria-hidden="false" role="dialog">
        <div class="slds-modal__container" style="max-width:50rem;">
            <div class="slds-modal__header">
                <button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.hideExampleModal}">
                    <lightning:icon iconName="utility:close" size="medium" variant="bare"/>
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 class="slds-text-heading--medium">Example Modal</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div class="modalContent">
                   <p>Content goes here</p> 
                </div>
            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.hideExampleModal}">Close</button>
            </div>
        </div>
 </div>

Controller.js

    hideExampleModal : function(component, event, helper) {
        helper.hideExampleModal(component);
    },
    
    showExampleModal : function(component, event, helper) {
        helper.showExampleModal(component);
    },

Helper.js

    showExampleModal : function(component) {      
        var modal = component.find("exampleModal");
        $A.util.removeClass(modal, 'hideDiv');        
    },
    
    hideExampleModal : function(component) {
        var modal = component.find("exampleModal");
        $A.util.addClass(modal, 'hideDiv');
    },

风格

.THIS.hideDiv {
    display: none;
}

【讨论】：

【解决方案2】：

默认情况下，Modal 是打开的。您需要使用 aura:if 进行控制。

【讨论】：

在一些系统功能（例如：账户）中，闪电打开一个模态，看起来不像是使用aura:if，而是一些标准功能。
据我所知，我们可以通过两种方式打开自定义弹出窗口。一个是使用闪电快速动作 - 它是一种按钮，点击此动作会打开闪电组件。其次是使用 slds-modals。我们没有任何打开/关闭模式。默认情况下它是打开的。要切换此打开/关闭，我们通常使用 aura:if。或一些 css（如下文所述）