I am attempting to build a button that will close a modal, I have tried multiple different ways. I have attempted to close it using the promises or component.find('overlayLib');
I have a component where I'm building out an overlay
<lightning:overlayLibrary aura:id="overlayLib" />
I built it in my controller in a button click it opens.
showModal: function(component, event, helper) {
var modalBody;
var modalFooter;
modalBody = component.get("v.modalBody");
modalFooter = component.get("v.modalFooter");
component.find("overlayLib").showCustomModal({
header: "Add",
body: modalBody,
footer: modalFooter,
showCloseButton: true,
cssClass: ""
}).then(function (overlay) {
component.set("v.modalPromise", overlay);
});
},
And then I try to close with this this logic, and fire an event..
handleSave: function(component, event, helper) {
var value = component.find("inputTextAreaID").get("v.value");
var row = component.get("v.row");
var dataTableID = component.get("v.datatableID");
var column = component.get("v.column");
var overlayPanel = component.get("v.modalPromise");
console.log(overlayPanel);
console.log(overlayPanel.close);
overlayPanel.close();
var cmpEvent = component.getEvent("cellChangeEvent");
cmpEvent.setParams({
"value": value,
"rowIndex": row.rowIndex,
"row": row,
"fieldName": column.fieldName,
"dataTableID": dataTableID
});
cmpEvent.fire();
}
My console then spits out the details
I've checked out all the solutions that have been posted here.. Does anyone have a surefire way of solving this?