How to close lightning:overlayLibrary custom modal?

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


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

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

in that component's helper's close function


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

    function (modal) {

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.

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


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


  showModal : function(cmp, evt, helper) {
      //modal attributes
    }).then(function (overlay) {
      component.set('v.overlayPanel', overlay);
  handleOk : function(cmp, evt, helper {
    var overlayPanel = component.get('v.overlayPanel');