0

I have the Test.cmp file

<aura:component controller="Test" implements="force:appHostable, flexipage:availableForAllPageTypes, force:hasRecordId">
<lightning:button label="Add new"  onclick="{!c.openEventPopup}"/>

The controller of Test file

OpenEventPopup : function(component, event, helper) {       
        var modalFade1 = component.find('editStudent');    
        component.find("editStudent").submitDR(modalFade1);
    },

The editStudent.cmp

<aura:if isTrue="{!v.isModalOpen}">
         
    <!-- Modal/Popup Box starts here-->
    <section role="dialog" aura:id="modalFade" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- Modal/Popup Box Header Starts here-->
            <header class="slds-modal__header">
                <lightning:buttonIcon iconName="utility:close"
                                      onclick="{! c.closeEventPopup }"
                                      alternativeText="close"
                                      variant="bare-inverse"
                                      class="slds-modal__close"/>

            <!--Modal/Popup Box Footer Starts here-->
            <footer class="slds-modal__footer">
                <lightning:button variant="neutral"
                                  label="Cancel"
                                  title="Cancel"
                                  onclick="{! c.closeEventPopup }"/>
                <lightning:button variant="brand"
                                  label="Save"
                                  title="Save"
                                  onclick="{!c.addNewStudent}"/>
            </footer>
        </div>
    </section>
</aura:if>

The controller editStudent

openEventPopup : function(component, event, helper) {
        var modalFade = component.find('modalFade');        
        $A.util.addClass(modalFade,'slds-fade-in-open');

        component.set("v.isModalOpen", true);
    },
    
    closeEventPopup : function(component, event, helper) {
        var modalFade = component.find('modalFade');
        
        $A.util.removeClass(modalFade,'slds-fade-in-open');

        component.set("v.isModalOpen", false);
    }, 

But when I click the button, the modal isn't show up . Why

1 Answer 1

0

Your issue is because you are looking for the component modalFade but since you have an aura:if, it is not yet available on the page.

set the variable isModalOpen to true first so that it let the component to render the modal.

component.set("v.isModalOpen", true);
var modalFade = component.find('modalFade');
$A.util.addClass(modalFade,'slds-fade-in-open');

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .