AURA Modal pop up

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

    <!-- Modal Trigger -->
    <lightning:button label="Open Modal" onclick="{!c.openModal}" />

    <!-- Modal Popup -->
    <aura:if isTrue="{!v.isModalOpen}">
        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <!-- Header -->
                <header class="slds-modal__header">
                    <lightning:buttonIcon
                        iconName="utility:close"
                        alternativeText="Close"
                        onclick="{!c.closeModal}"
                        class="slds-modal__close" />
                    <h2 class="slds-text-heading_medium">Modal Title</h2>
                </header>

                <!-- Body -->
                <div class="slds-modal__content slds-p-around_medium">
                    <p>Your content goes here.</p>
                </div>

                <!-- Footer -->
                <footer class="slds-modal__footer">
                    <lightning:button label="Cancel" onclick="{!c.closeModal}" />
                    <lightning:button label="Save" variant="brand" onclick="{!c.saveChanges}" />
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>