I have a lightningOverlayLibrary that generates an LWC component in its body. The LWC dispatches a close event that the aura component handles.

The aura component needs to close the lightningOverlayLibrary but the handler does not have the instance of the component available as a parameter so it can't close it.

I need to either get the component, or get the lightningOverlayLibrary from the aura handler to close it. How can that be done?

Aura Component:

<aura:component implements="lightning:actionOverride,force:hasRecordId,lightning:hasPageReference">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:overlayLibrary aura:id="overlayLib" />

Aura Controller:

    doInit: function(component, event, helper) {
                recordId: component.get('v.recordId'),
                recordTypeId: component.get("v.pageReference").state.recordTypeId,
                oncancel: component.getReference("c.handleCancel"),
        function(components, status) {
            if (status === "SUCCESS") {
                const form = components[0];
                    header: "New Opportunity",
                    body: form,
                    showCloseButton: true,
                    cssClass: "slds-modal_medium",
    handleCancel: function(cancelEvent) {
        // I need to either get the component instance here OR the overlayLibrary to close it

LWC Controller:

handleCancel(event) {
    this.dispatchEvent(new CustomEvent('cancel'));

1 Answer 1


In your controller, you want to cache the modal instance when you call showCustomModal() and store it as a component attribute. Like this:

var modalPromise = component.find("overlayLib").showCustomModal({
    header: "Sample Modal",
    body: modalBody,
    footer: modalFooter,
    showCloseButton: true,
    cssClass: "cMyComponent mymodal slds-modal_medium"
component.set("v.modalPromise", modalPromise);

Then, when you want to close the modal, you can get a reference to the modal instance, and call close on it. Like so:

component.get("v.modalPromise").then((modal) => {

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .