I've been using lightning:overlayLibrary Modal in a component which is referred in a Lightning Page and in a Lightning Tab. I'm using a custom button to close the modal which performs a overlayPromise.close() method of the promise returned by lightning:overlayLibrary. I am able to close the modal by this way when the component is in Lightning Page. But, Fails to close the modal when the component is in a Lightning Tab.

enter image description here And when I try to do the close action in the browser console, the modal gets closed. It's weird.


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:overlayLibrary aura:id="overlayLib"/>
<aura:attribute name="overlayPanel" type="Aura.Component[]" />
<lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>


        handleShowModal: function(component, evt, helper) {
            var modalBody;
            $A.createComponent("lightning:button", {
                "label" : 'Close Modal',
                "onclick" : component.getReference("c.closeModal")
            },function(content, status) {
                if (status === "SUCCESS") {
                    modalBody = content;
                        header: "Overlay Modal",
                        body: modalBody, 
                        showCloseButton: true,
                        closeCallback: function() {
                            console.log('You closed the alert!');
                    }).then(function (overlay) {
                        component.set('v.overlayPanel', overlay);


        closeModal : function(component,event,helper){
            var overlayPanel = component.get('v.overlayPanel');


Additional Info: The same scenario throws the following error when used in packaging Orgs

Access Check Failed! Component.method():'markup://ui:close' is not visible to 'markup://Org Namespace-URL

enter image description here

Stack Trace:

resolve()@https: //my-dev-ed.lightning.force.com/components/lightning-overlay-utils.js:200:33 OverlayPanel.close()@https: //my-dev-ed.lightning.force.com/components/lightning-overlay-utils.js:199:16 Object.closeCalendarModal()@https: /my-dev-ed.lightning.force.com/one/components/my_ns/Calendar.js:116:29 eval()@https ://my-dev-ed.lightning.force.com/one/components/my_ns/Calendar.js:137:28 Object.destroyHelper()@https ://my-dev-ed.lightning.force.com/one/components/my_ns/Calendar.js:139:49

  • Any chance you could post the Stack Trace as well?
    – Folkert
    May 30, 2018 at 10:44
  • Stack Trace added @Folkert
    – A.Bretto
    May 30, 2018 at 12:03
  • why do you save the returned reference to the modal as an array of components? Jun 3, 2018 at 6:41
  • unable "component.find('overlayPanel')" inside the modal body. so we are storing an instance of it as an attribute to use it onclick of the button inside the modal body.
    – A.Bretto
    Jun 4, 2018 at 6:28

1 Answer 1


I ran in this issue today as well.

For me, creating a custom modal footer component instead of using the promise returned object worked also in tab only context.

The approach is detailed in the docs with c:modalFooter and in this answer which also contains discussion on debugging details and if this method is really, really the same as close() on the promise return object.

Personally, I would also prefer to work with the object returned by the promise.

For what it's worth, I didn't use a component attribute to store the modal reference but a temporary attribute/expando on component:

     component.myOverlay =  overlay

Access check fails in this instance as well.

What ultimately worked for me in both contexts was this approach using an Aura.Action attribute instead of an expando / cmp array attribute and calling it this way:

      function (modal) {

You must log in to answer this question.

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