As you can see, the close button on the New Opportunity dialog is larger (20x20 px) and centered in the box, where the close button that Lightning is giving me in my dialog is off center and smaller. I've looked through the modals documentation and cannot find any options for the close button other than whether to show it (boolean). Is there a way to make the close button in my modal look the way it does in the New Opportunity modal?
Hi Sunil,
Thanks for your response. I've tried inserting code like that and unfortunately, it doesn't work for me. Can you tell me how this works, like, does it actually override the default close button, or does it go on top of it? From the way it looks, it seems like it would just put the close button inside the header (and leave the close button above the modal untouched), which is not what I want.Also, the way I am creating modals is different than yours, so the solution might need to be different. I am using a helper function called CreateModal:
CreateModal: function(component, components, cssClass){
var componentProperties = {};
var createComponents = [];
if(components.header){
createComponents.push(components.header);
componentProperties['header'] = true;
}
if(components.body){
createComponents.push(components.body);
componentProperties['body'] = true;
}
if(components.footer){
createComponents.push(components.footer);
componentProperties['footer'] = true;
}
$A.createComponents(createComponents,
function(content, status, error) {
if (status === "SUCCESS") {
var modalComponents = {
cssClass: cssClass || "",
showCloseButton: true
}
var i = 0;
if(componentProperties.header) {
modalComponents['header'] = content[i++];
}
if(componentProperties.body){
modalComponents['body'] = content[i++];
}
if(componentProperties.footer){
modalComponents['footer'] = content[i++];
}
components.library.showCustomModal(modalComponents);
}
});
}
This method is called from a controller in another component, passing in a JavaScript object that represents a modal, optionally including a header, body, footer, and additional CSS. Here's an example:
CreateModal(component, {
"body": ["c:MyComponent", { "att": attributeValue }],
"library": component.find("previewOverlayLib")
},
"slds-modal_medium"); // Extra css classes
Do you know where I would need to adapt the header code to make it compatible with this?
