X Button
The glorified button with X at the top right corner of the modal.
The X button is a method to close or hide the modal. This is one of the options can be be set as default in ModalManager instance, but can also be customized for each Modal instance.
Here is how to do it -
ModalManager.instance.setParameters({
xButton: {
enabled: false
},
baseShiftDistance : {
top : 100,
left : 100
}
});
ModalManager.instance.addModal({
header: {
enabled: true,
title: 'Testing X Button',
titleTag: 'h3'
},
body: {
content: `<div>You don't see any X button, right?</div>`
},
footer: {
enabled: true,
mode: 'alert'
}
});
But you can also enable it for any modal instance if you like. Lets create a snippet of fun code that can randomly pick one X button config from a array and use it for the new modal.
let xButtonConfigs = [
{
enabled: true,
content: 'Close',
cssClass: 'big-border fit-content',
inlineStyles: 'padding: 20px;'
},
{
enabled: true,
content: 'Hide!',
cssClass: 'big-border fit-content bg-warning',
inlineStyles: 'padding: 20px;border-radius: 10px;'
},
{
enabled: false,
},
{
enabled: true,
content: `<i class="fa fa-fw fa-close"></i> Close`,
cssClass: 'big-border fit-content bg-warning',
inlineStyles: 'padding: 20px;border-radius: 10px;'
}
];
document.getElementById('btn-random')?.addEventListener('click',() => {
let xButton = xButtonConfigs[Math.floor(Math.random() * xButtonConfigs.length)];
ModalManager.instance.setParameters({
xButton: {
enabled: false
},
baseShiftDistance: {
top: 100,
left: 100
}
});
ModalManager.instance.addModal({
header: {
enabled: true,
title: 'Testing X Button',
titleTag: 'h3'
},
body: {
content: `<div>You may or may not see an X button!</div>`
},
footer: {
enabled: true,
mode: 'alert'
},
xButton : xButton
});
});
xButton configuration has properties
enabled, content, cssClass and inlineStyles using which you can customize the button as you like, or just hide if you dislike!