How to close lightning:overlayLibrary custom modal?

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

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();

Attribution
Source : Link , Question Author : cottog , Answer Author : Laura Kolker

Leave a Comment