1

Today, I'm faced with this problem: I have a button in a parent component that should open a modal dialog in a subcomponent, but when I add a class to show my modal dialog it doesn't work. Here is the parent's component code:

<aura:component access="GLOBAL">        
    ...     
    <lightning:button class="signerButtons" tabindex="{!index}" label="" iconName="standard:people" iconPosition="left" variant="brand" onclick="{!c.showOppmodal}"/>        
    ...     
    <c:OrganizeEnvelopeModalWindow/>    
</aura:component>

Parent's JS controller code:

   showOppmodal: function(component, event, helper) {
         //Toggle CSS styles for opening Modal
        helper.toggleClass(component,'backdrop','slds-backdrop--');
        helper.toggleClass(component,'modaldialog','slds-fade-in-');
    },

Parent's Helper code:

  toggleClass: function(component,componentId,className) {
        var modal = component.find(componentId);
        $A.util.removeClass(modal,className+'hide');
        $A.util.addClass(modal,className+'open');
    },

Lastly, the subcomponent code:

<aura:component access="GLOBAL" >
    <div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open" aura:id="modaldialog">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 id="header43" class="slds-text-heading--medium">Firmatari</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div class="c-container">
                    <p>Hello</p>

                 </div>             
            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button--neutral">Cancel</button>
                <button class="slds-button slds-button--brand">Save</button>
            </div>
        </div>
    </div>
    <div class="slds-backdrop slds-backdrop--open" aura:id="backdrop"></div>
</aura:component>

Maybe, I missed to know something about the scope of the parents and subcomponents.

How can I resolve?

Thanks in advance.

3

The find method only finds components that are direct children. One way to fix that would be:

<c:OrganizeEnvelopeModalWindow aura:id="modal"/>

showOppmodal: function(component, event, helper) {
    //Toggle CSS styles for opening Modal
    var modal = component.find("modal");
    helper.toggleClass(modal,'backdrop','slds-backdrop--');
    helper.toggleClass(modal,'modaldialog','slds-fade-in-');
},

The way I display a modal is to add the class slds-fade-in-open to the modal and slds-backdrop--open to the backdrop.

Probably a better way to organize this is to use an attribute to show/hide the modal:

<aura:component>

    <aura:attribute name="show" type="Boolean" default="false"/>

    <div class="{! 'slds-modal slds-modal--large ' + (v.show ? 'slds-fade-in-open' : '') }">
        <div class="slds-modal__container">
            ...
        </div>
    </div>

    <div class="{! 'slds-backdrop ' + (v.show ? 'slds-backdrop--open' : '') }">
    </div>

</aura:component>

so the containing component doesn't have to reach inside but instead can directly set the show attribute.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.