Level 63
A modal is usually displayed with a blurred background on the whole page.
You can add an event listener on this background and if you click on it, you close the modal.
May 16, 2025
3
Level 1
toggle content with clicking outside
Excuse me guys if I am using like this function function toggleselver(modalId) {
const modal = document.getElementById(modalId);
if (modal) {
modal.classList.toggle('hidden');
}
} to toggle modal showing and hide I need also when I clicking outside the form will be hidden just if its visible How to customize that.
..Best Regards.
Level 1
welcome sir I do it but I need just to customize when I clicking outside will hide too.
1 like
Level 73
I suggest checking out the dialog element, that has some nice built in functions.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog
Super easy to use,
//open it
document.querySelector('#myModal').showModal();
//close it
document.querySelector('#myModal').close();
It closes when the user presses escape as well.
1 like
Please or to participate in this conversation.