Building Engaging Modals: HTML Dialog Element Explained
In this video, we discussed how to create a modal using the simple HTML dialog element which makes it easy to create an accessible modal.
🔗 Links
✅ VSCode - https://code.visualstudio.com/
✅ mozilla (dialog doc) - https://developer.mozilla.org/en-US/d...
✅ uiverse.io (button design) - https://uiverse.io/adamgiebl/giant-do...
⌚ Timestamps
0:00 - Introduction
0:04 - Project structure
0:12 - Targeting trigger button element
0:21 - Adding an event listener to the button
0:27 - Targeting the dialog element
0:33 - Calling the showModal method to display dialog
0:39 - Show output of initial code
0:42 - Description of output
0:53 - Clicking button to show modal
1:00 - Interesting thing about using the dialog element (esc key)
1:03 - Using esc key to hide the modal
1:10 - Adding a custom close button
1:32 - Show new output with close modal button implemented
1:38 - Conclusion
#html #html5 #htmltutorial #htmlcode #vscode #javascript #coding
--
You can email me on
✉ [email protected]
---
Help support my channel
💖 Support me on PayPal: https://paypal.me/durosly💖
---
My editor: VS Code - https://code.visualstudio.com/
---
I'm on some other places on the internet too!
Twitter: / durosly_
LinkedIn: / durosly
Github: https://github.com/durosly
Instagram: / theweb.dev_
Website: https://durosly.com
---
Remember this, learning is not a linear process. Every time you dedicate to learning is one step towards your goal.