+ Start a Discussion
Deja BondDeja Bond 

Modal opens onclick

Hi all, 
so on click of the "Create New Matrix" button, I need my modal to appear
Usually I do an aura:if, but I don't think that would work for this case

<div class="slds-align_absolute-center slds-m-around_small">
        <lightning:button variant="brand" disabled="{!!v.hasMtxSelected}" label="Add" title="Add" onclick="{! c.doAddCandidateToMatrix }" />
        <lightning:button variant="brand" label="Create New Matrix" title="Create New Matrix" onclick="{! c.doCreate }" />
        <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.doCancel }" />
    </div>
    
    <!-- Deja B.-->   
    <!--SLIDE 6 on Wireframe-->
    
       <!-- <lightning:button variant="brand" label="Create New Matrix"  --> }" 
        <div aura:id="CreateMatrixModalState" onclick="{!v.displayCreateMatrixModalState}">
            <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">
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.doShowHideCreateMatrixModalState }" alternativeText="close"
                                              variant="bare-inverse" class="slds-modal__close" />
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                            New Matrix Information</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <lightning:input aura:id="matrixName" name="Matrix Name" maxlength="80"
                                         label="Matrix Name" placeholder="Matrix Name" />
                        <aura:if isTrue="{!not(empty(v.inputError))}">
                            {!v.inputError}
                        </aura:if>
                    </div>
                    <footer class="slds-modal__footer">
                        
                        <button class="slds-button slds-button_brand"
                                onclick="{!c.doBack}">{!$Label.c.Back}</button>
                        
                        <!--Using doCreate as defined above-->
                        <button class="slds-button slds-button_brand" 
                                onclick="{!c.doCreate}">{!$Label.c.Create_New_Matrix_State}</button>
                        
                        <button class="slds-button slds-button_neutral"
                                onclick="{!c.doShowHideCreateMatrixModalState}">{!$Label.c.Cancel}</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>

Hence, when this button is clicked Create New Matrix
User-added image
This modal appears, 
User-added imageI think my onclicks are off because the modal appears without me clicking the button
 
TylerBrooksTylerBrooks
Deja,

Wouldn't you need to use the <aura:if> statement to hide the modal until the onclick function sets the v.isOpen boolean to true?

Try Adjusting to this and let me know how it goes:

​​​​​​​<div class="slds-align_absolute-center slds-m-around_small">
        <lightning:button variant="brand" disabled="{!!v.hasMtxSelected}" label="Add" title="Add" onclick="{! c.doAddCandidateToMatrix }" />
        <lightning:button variant="brand" label="Create New Matrix" title="Create New Matrix" onclick="{! c.doCreate }" />
        <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.doCancel }" />
    </div>
    
    <!-- Deja B.-->   
    <!--SLIDE 6 on Wireframe-->
    
       <!-- <lightning:button variant="brand" label="Create New Matrix"  --> }" 
        <div aura:id="CreateMatrixModalState" onclick="{!v.displayCreateMatrixModalState}">
<aura:if isTrue="{!v.isOpen}">
            <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">
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.doShowHideCreateMatrixModalState }" alternativeText="close"
                                              variant="bare-inverse" class="slds-modal__close" />
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                            New Matrix Information</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <lightning:input aura:id="matrixName" name="Matrix Name" maxlength="80"
                                         label="Matrix Name" placeholder="Matrix Name" />
                        <aura:if isTrue="{!not(empty(v.inputError))}">
                            {!v.inputError}
                        </aura:if>
                    </div>
                    <footer class="slds-modal__footer">
                        
                        <button class="slds-button slds-button_brand"
                                onclick="{!c.doBack}">{!$Label.c.Back}</button>
                        
                        <!--Using doCreate as defined above-->
                        <button class="slds-button slds-button_brand" 
                                onclick="{!c.doCreate}">{!$Label.c.Create_New_Matrix_State}</button>
                        
                        <button class="slds-button slds-button_neutral"
                                onclick="{!c.doShowHideCreateMatrixModalState}">{!$Label.c.Cancel}</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
        </div>


 
new test 3new test 3
hello 
Deja BondDeja Bond
Hi @TylerBrooks
I added the {v.open), my server is down tho, so I will get back to you shortly to let you know if it works