0

I am new to LDS , what i am trying to achieve is embed a modal in lightning component and call this component on lightning action which i added on page layout, now , where user clicks the action , it opens up the modal and can fill in some information ; so on the same modal component i have save and cancel buttons ; when cancel is clicked it works fine that it closes the modal and goes back to the page where the action is hosted , now again when i click on the action , the modal doesnt come up . I believe ,since i am removing slds class on cancel click - the same page isnt able to add back the slds class when i click the action again..any thoughts ? I have tried using init handler to add back classes but it doesnt work - i am not really intrested in using $A.util.removeclass but rather $A.get("e.force:closeQuickAction").fire() which isnt working to close the modal.

component.cmp

  <div class="slds-modal__footer">
   <button class="slds-button slds-button--neutral" onclick=" 
     {!c.closeModal}">Cancel</button>
    <button class="slds-button slds-button--brand">Save</button>
    </div> 

controller.js

 closeModal : function(component,event,helper)
{
    var a = component.find('mm');
    var b = component.find('backdrop');

   $A.util.removeClass(a,'slds-fade-in-open');
$A.util.removeClass(b,'slds-backdrop--open');
1

The approach I have taken is to add an attribute to my modal components like this:

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

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

so e.g. the close method can just be:

closeModal : function(component, event, helper) {
    component.set("v.show", false);
},

and code that wants to show the modal just sets that attribute.

  • thanks Keith , i used your logic , but still , i have to refresh the page ,to open up the modal on click of lightning action – user2945545 Apr 22 '17 at 17:47
  • I think , for now i have found the resolution , i am placing a lighting button to call the lightning component in turn ,so even if the modal is cancelled , the button is able to kick start the modal again... – user2945545 Apr 24 '17 at 14:34

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.