3

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.

4

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"> 
...
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.