How to know if user has clicked outside the Modal [duplicate]

Question

I want to close the Modal when user click outside the Modal. I'm not able to find the event which will get fired on this case.

Component:

<aura:component>

    <aura:attribute name="isOpen" type="boolean" default="false"/>

    <div class="slds-m-around_xx-large" aura:id="outerDiv" onclick="{!v.closePopup}">

        <lightning:button variant="brand"
                          label="Button"
                          title="Button"
                          onclick="{! c.openModel }" />
        <aura:if isTrue="{!v.isOpen}" aura:id="modalpopup">

            <!--###### MODAL BOX Start######--> 
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- ###### MODAL BOX HEADER Start ######-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal</h2>
                    </header>
                    <!--###### MODAL BOX BODY Part Start######-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>Popup
                            </b>
                        </p>
                    </div>
                    <!--###### MODAL BOX FOOTER Part Start ######-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" 
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand" 
                                          label="Like and Close"
                                          title="Like and Close"
                                          onclick="{! c.likenClose }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            <!--###### MODAL BOX Part END Here ######-->

        </aura:if>
    </div>
</aura:component>

Answer 1

If you put a click handler on the backdrop element, you'll know they clicked outside the modal. At this point, you can close the modal if that's the behavior you're trying to emulate.