Close Lightning Modal by clicking anywhere outside of it

Question

Just wondering whether this is possible? i.e. once a modal is open, close it by clicking anywhere on the grey backdrop?

I've tried invoking my custom close-modal function via:
- Adding onclick to the slds-backdrop div
- Adding onblur to the slds-modal__container div
- Adding onclick to the slds-modal (just wanted to see whether this would work)

None of these seem to work.

Answer 1

It is possible, my approach is/was to create a static resource with an eventlistener on clicks outside of the scope of my modal. i then referenced the static resource in my lightning component and on click I simply change the classes (add/remove)

For my actual modal, I have 1 eventlistener which on click I trigger an event.stopPropagation(); for example:

Object.addEventListener('click', function(e){
    e.stopPropagation();
});

and for the rest of the component:

document.addEventListener('click', function(e){
    closeModal();
});

in the end, I endup having a component:

<aura:component implements="interfaces" access="global" >
    <ltng:require 
        scripts="{!$Resource.MyJsResource+ '/File.js'}" />

    <div class="slds">
    <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="modaldialog">
        <div class="slds-modal__container"> 
...

Answer 2

In addition to the previous answer. You can implement such logic within Aura-component without any imports:

<div role="dialog" aura:id="modal" class="slds-modal" onclick="{!c.closeModal}">
  <div class="slds-modal__container">
    <header class="slds-modal__header slds-modal__header_empty">
      <lightning:buttonIcon iconName="utility:close" alternativeText="Close" size="large" variant="bare-inverse" class="slds-modal__close"/>
    </header>
    <div class="slds-modal__content" onclick="{!c.stopPropagation}">
      <!--modal content-->
    </div>
  </div>
</div>
<div class="slds-backdrop" aura:id="backdrop"></div>

Component methods:

showModal: function (cmp, evt, hlp) {
  hlp.toggleModal(cmp);
},

closeModal: function (cmp, evt, hlp) {
  //logic before closing module
  hlp.toggleModal(cmp);
},

stopPropagation: function (cmp, evt, hlp) {
  evt.stopPropagation();
}

Helper:

toggleModal: function (cmp) {
  $A.util.toggleClass(cmp.find('modal'), 'slds-fade-in-open');
  $A.util.toggleClass(cmp.find('backdrop'), 'slds-backdrop--open');
}

Answer 3

I tried this, and WORKING!

CloseModel.cmp

<aura:component  implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName"> 

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

  <div onclick="{!c.stopPropagation}">
    <lightning:button variant="brand"
                      label="Button"
                      title="Button"
                      onclick="{! c.showModal }"  />
    </div>
    <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" onmouseover="{!c.closeModelOnClick}">
            
            <div class="slds-modal__container" >

                <!-- ###### MODAL BOX HEADER Start ######-->
                <header class="slds-modal__header" onclick="{!c.stopPropagation}">
                    <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" onclick="{!c.stopPropagation}">
                    <p><b>Popup
                        </b>
                    </p>
                </div>
                <!--###### MODAL BOX FOOTER Part Start ######-->
                <footer class="slds-modal__footer" onclick="{!c.stopPropagation}">
                    <lightning:button variant="neutral" 
                                      label="Cancel"
                                      title="Cancel"
                                      onclick="{! c.closeModel }"/>
                  
                </footer>
            </div>
        </section>
       <div class="slds-backdrop slds-backdrop--open"></div>
        <!--###### MODAL BOX Part END Here ######-->
    </aura:if>
</aura:component>

CloseModelController.js

  ({
      showModal: function (component, event) {
        component.set("v.isOpen", true);
      },
        
      closeModel: function (component, event) {
        component.set("v.isOpen", false);
      },
         
     closeModelOnClick: function (component,event) {
            window.addEventListener("click", function (event) {
            component.set("v.isOpen", false);
            $A.get('e.force:refreshView').fire();
                });
      },
  
   /* use where on click close, should not work (on the button, Model header,body,footer) */

     stopPropagation: function (cmp, evt, hlp) {    
          evt.stopPropagation();
        }
        });