如何在Salesforce Lightning App中打开/关闭模式?

时间:2017-05-29 01:56:50

标签: salesforce salesforce-lightning

我看到了关于modals的这份文件。

但是没有用于从按钮或类似引导程序唤醒模态的公会线。

你们知道我怎么能这样做?

2 个答案:

答案 0 :(得分:2)

在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>
&#13;
&#13;
&#13;

Controller.js

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

Helper.js

&#13;
&#13;
    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');
    },
&#13;
&#13;
&#13;

风格,

&#13;
&#13;
.THIS.hideDiv {
    display: none;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

默认情况下,Modal已打开。你需要使用光环控制:if。