Back






The object of Modal1 remains after closing and can be reopened. The object of Modal2 is destroyed upon closing and can only be opened once.

Source of exampleCopy to clipboard


const myModal1 = new AvalynxModal('modal1', {
    title: 'Current time : ' + new Date().toLocaleTimeString(),
    body: 'Current time : ' + new Date().toLocaleTimeString(),
    safeInstance: true,
    buttons: [
        {
            label: 'OK-1',
            class: 'btn-primary',
            onClick: () => alert('Yes')
        },
        {
            label: 'Close-1 ',
            class: 'btn-secondary',
            onClick: () => myModal1.close()
        }
    ]
});

const myModal2 = new AvalynxModal('modal2', {
    title: 'Current time : ' + new Date().toLocaleTimeString(),
    body: 'Current time : ' + new Date().toLocaleTimeString(),
    buttons: [
        {
            label: 'OK-2',
            class: 'btn-primary',
            onClick: () => alert('Yes')
        },
        {
            label: 'Close-2 ',
            class: 'btn-secondary',
            onClick: () => myModal2.close()
        }
    ]
});

document.getElementById('openModalBtn1').addEventListener('click', function () {
    myModal1.setBody('Current time : ' + new Date().toLocaleTimeString());
    myModal1.open();
});

document.getElementById('openModalBtn2').addEventListener('click', function () {
    myModal2.setBody('Current time : ' + new Date().toLocaleTimeString());
    myModal2.open();
});
	
AvalynxModal on GitHub Avalynx on GitHub