Lightning Design system modal closes but doesnt open on click of lightning action

Question

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');

Answer 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.