Click Outside to Close Modal | Close HTML dialog Element by Clicking Out

💻 Get my Source Codes and support the channel ❤️: www.buymeacoffee.com/fabiomus...
⬇️ LEARN ON THE BEST LEARNING PLATFORMS (LINKS BELOW) 😉💪 ⬇️
☕ Buy me a coffee: www.buymeacoffee.com/fabiomus...
😍 One-off donation: www.paypal.me/FabioMusanni/
SKILLSHARE
(Web Dev, UI/UX Design, Python, Music, Art, Animation and a lot more)
🔗 skillshare.eqcm.net/5gxzD2 (Affiliate)
COURSERA WEB DEVELOPMENT
(Full Stack, Front-End, Back-End, Web Design and a lot more):
🔗 imp.i384100.net/EKWxBW (Affiliate)
DATACAMP
(Python, ChatGPT, SQL, Power BI, and more)
🔗 datacamp.pxf.io/vN1bDj (Affiliate)
COURSERA PYTHON
(For beginners, Data Science, Data Analysis, AI, Cybersecurity and a lot more):
🔗 imp.i384100.net/k0Nk60 (Affiliate)
Learn how to close modals using Javascript by clicking outside.
🎥 Web Dev Playlist: • 💻 Web Development Play...
🎥 How to Create Modals Video: • EASIEST Way to Create ...
🎥 Live Server Video: • How to Install and Use...
🎥 Prettier Video: • How to Install and Use...
If the video was helpful, let me know in the comments down below and also like the video so that other people can see it. Needles to say I really appreciate your support 💪❤️
📨 SUBSCRIBE so that you don't miss any new video:
ruclips.net/user/FabioMusann...
🤗 BIO PAGE (contacts, etc): solo.to/fabiomusanni
Create Your Bio Page (10% OFF Upgraded Plans 😉): solo.to/inv/NDE4NzE2
🔗 RELATED CONTENT (videos, playlists, etc) 🔗
Web Dev Playlist: • 💻 Web Development Play...
🤩 AFFILIATE LINKS 🤩
Create Your Bio Page (10% OFF Upgraded Plans): solo.to/inv/NDE4NzE2
🧑🏻‍💻 ABOUT ME 🧑🏻‍💻
I'm Fabio, I started programming with Python a lot of years ago and I fell in love with this world.
I started this RUclips channel to help you during your own journey and I hope that my help can make you an amazing programmer who loves this world as I do.
Welcome on board!! 🚀
#webDevWithFabioMusanni #css #webdevelopment #webdev #css3 #csstutorial

[@FabioMusanni]

⚠️ 🚨 *IMPORTANT:* place the script tag inside the body!
⬇️ *LEARN ON THE BEST LEARNING PLATFORMS (LINKS BELOW)* 😉💪 ⬇️
☕ *Buy me a coffee:* www.buymeacoffee.com/fabiomusanni
❤️ *Support me monthly:* www.patreon.com/FabioMusanni
😍 *One-off donation:* www.paypal.me/FabioMusanni/
*SKILLSHARE*
_(Web Dev, UI/UX Design, Python, Music, Art, Animation and a lot more)_
🔗 skillshare.eqcm.net/5gxzD2 (Affiliate)
*COURSERA WEB DEVELOPMENT*
_(Full Stack, Front-End, Back-End, Web Design and a lot more):_
🔗 imp.i384100.net/EKWxBW (Affiliate)
*DATACAMP*
_(Python, ChatGPT, SQL, Power BI, and more)_
🔗 datacamp.pxf.io/vN1bDj (Affiliate)
*COURSERA PYTHON*
_(For beginners, Data Science, Data Analysis, AI, Cybersecurity and a lot more):_
🔗 imp.i384100.net/k0Nk60 (Affiliate)
Thank you for the support!❤
🎥All my videos about web dev: ruclips.net/p/PLs8qUrmRvaR3_p-UwLFvQ2NySkORSYUiB

[@christianjack1250]

Event is deprecated?

[@sara.j.w]

Dude! Thank you for this, got the light dismiss working on my site again. The only change I had to make was some looping as I have several dialogs on one page:
const modalLightDismiss = ( () => {
const dialogs = document.querySelectorAll('dialog');
for (const dialog of dialogs) {
dialog.addEventListener('click', (event) => {
if (event.target === dialog) dialog.close()
});
}
})();

[@FabioMusanni]

Thank you for the comment! Glad the video was helpful 💪😉

[@cgianimationtv1828]

Please 🙏 code a functional subscription model

[@explorster]

Good video. You just repeated yourself for over 7 minutes.