How to close lightning:overlayLibrary custom modal?

Question

The documentation shows how to close an overlay immediately after showing the modal, however, this is not very useful for real-life situations.

I have a component which has a lightning:overlayLibrary in its markup. When a button is clicked, the controller fires a showCustomModal with a child component as its content. The child component has a button that fires an event when pushed. The parent component handles the event and should close/destroy the modal.

I've tried component.find('overlayLib').notifyClose() in the event handler, however, it seems that this fires an event that needs to be handled.

How would one go about handling this event or is there an easier way to do this?

Answer 1

I was having some trouble getting the notifyClose function to work as well. If you base your code off the samples here, you'll be tempted to use the same local ID for multiple lightning:overlayLibrary declarations. That doesn't seem to work reliably.

I found I had to do something like this:

in the parent component which will launch the modal:

<lightning:overlayLibrary aura:id="overlayLib1"/>

in that component's helper where showCustomModal is called

component.find('overlayLib1').showCustomModal({...

in the modal's component containing buttons which will trigger closing

<lightning:overlayLibrary aura:id="overlayLib"/>

in that component's helper's close function

component.find("overlayLib").notifyClose();

Answer 2

Looks like previous answers no longer work. Here is the solution that worked for me. It seems that now you can close this modal only from a returned promise so we can save it and use later:

Add an attribute to a component with an overlay library

<aura:attribute name="modalPromise" type="Aura.Action"/>

Then save the returned promise to that attribute

var modalPromise = component.find('yourOverlayLibId').showCustomModal({ ... });
component.set("v.modalPromise", modalPromise);

And when you need to close your modal you can use the previously saved promise

component.get('v.modalPromise').then(
    function (modal) {
        modal.close();
    }
);

That's it. Don't forget that all that stuff is happening in the component containing <lightning:overlayLibrary> tag. So from the actual modal, you'll probably have to fire an event to trigger this flow.

Answer 3

Add the OverlayPanel to an attribute of type Aura.Component[] so that it could be reached from the JS controller.

Component

<aura:component>
    <aura:attribute name="overlayPanel" type="Aura.Component[] />
    <lightning:overlayLibrary aura:id="overlayLib"/>
    // body of component
</aura:component>

Controller

({
  showModal : function(cmp, evt, helper) {
    component.find('overlayLib').showCustomModal({
      //modal attributes
    }).then(function (overlay) {
      component.set('v.overlayPanel', overlay);
    });
  },
  handleOk : function(cmp, evt, helper {
    var overlayPanel = component.get('v.overlayPanel');
    overlayPanel[0].close();
  }
})

Answer 4

If you want the ability to close the modal from itself, there's a way easier way doing this (for custom overlay comp.):

According the SF lightning comp. documentation you can declare another overlayLibrary on your custom overlay with the same aura:id on the parent comp. like this:

<lightning:overlayLibrary aura:id="overlayLib"/>

then, on your overlay component add this (as your button handler):

({
  handleCancel : function(component, event, helper) {
      //closes the modal or popover from the component
      component.find("overlayLib").notifyClose();
  },
})

Works like a charm.

Answer 5

I found a hacky way to do this. I used the exact same code from the documentation except the notifyClose() part. Clearly notifyClose() method does not seem to do the trick as you pointed out.

After looking around a lot I started thinking how would I close a popup in javascript and stumbled on the below link.Prior to this I was using window.close to close the popup and end up getting “Scripts may close only the windows that were opened by it” error. I tried to look around on how to counter this error and stumbled up on this below link.

https://stackoverflow.com/questions/35936011/chrome-scripts-may-close-only-the-windows-that-were-opened-by-it-error

Applying the same concept here:

({
    handleCancel : function(component, event, helper) {
        //closes the modal or popover from the component
        //cancel button will not work since notifyClose() does not work.
        component.find("overlayLib").notifyclose();
    },
    handleOK : function(component, event, helper) {
        var popup = window.open(location, '_self', '');
        popup.close();
    }
})