I have an lightning application in which I am eventually going to have multiple modal popups being fired from various location in the app. I want to make a generic modal component that will serve as the structure for all of them instead of making lots of different modals with duplicate code. For now, I have just one popup with a save button at the bottom which will fire the save method and a cancel button which will close the modal. Currently, I have a stucture like this:

<c:modalCmp >
   <c:my_modal />
<c:/modalcmp>

and inside my modalCmp I have:

<div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-hide" aura:id="modaldialog">
    <div class="slds-modal__container modalSpacing">
        <div class="slds-modal__content slds-p-around--medium">
            {!v.body}
        </div>
    </div>
</div>
<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">
</div>

Now, inside the my_modal component, I have the details of the specific modal I want and the generic shell uses the body to populate it. The issue here is that some popups, like the one I am making require the save and cancel. In order to save, i'll need to be inside the specific component to get and save the data. And it order to press cancel, ill need to be inside the generic modal to access the close method. Additionally, the way i have seen to close a popup in salesforce is something like this:

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

Where it simply hides it. This works well until I need to do actions on inputted data and then press cancel, in which it keeps what ever I have typed in. Now i'm having to clear my attributes on close of the modal. So my question is, is there a good way to make this generic popup component? Thanks

I have an lightning application in which I am eventually going to have multiple modal popups being fired from various location in the app. I want to make a generic modal component that will serve as the structure for all of them instead of making lots of different modals with duplicate code. For now, I have just one popup with a save button at the bottom which will fire the save method and a cancel button which will close the modal. Currently, I have a structure like this:

<c:modalCmp >
   <c:my_modal />
<c:/modalcmp>

and inside my modalCmp I have:

<div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-hide" aura:id="modaldialog">
    <div class="slds-modal__container modalSpacing">
        <div class="slds-modal__content slds-p-around--medium">
            {!v.body}
        </div>
    </div>
</div>
<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">
</div>

Now, inside the my_modal component, I have the details of the specific modal I want and the generic shell uses the body to populate it. The issue here is that some Modals, like the one I am making require the save and cancel. In order to save, i'll need to be inside the specific component to get and save the data. And it order to press cancel, ill need to be inside the generic modal to access the close method. Additionally, the way i have seen to close a Modal in salesforce is something like this:

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

Where it simply hides it. This works well until I need to do actions on inputted data and then press cancel, in which it keeps what ever I have typed in. Now i'm having to clear my attributes on close of the modal. So my question is, is there a good way to make this generic Modal component? Thanks