Modal with HTML, CSS and JavaScript
ฝัง
- เผยแพร่เมื่อ 9 พ.ย. 2019
- Learn how to create a modal, from scratch, with HTML, CSS and JavaScript.
A modal is a popup box, usually positioned on top of everything else in the document and it is used to attract the user's attention to some special information or to ask the user to do something (for example to register or login) without navigating to another page.
It is a commonly used component in websites and that's why I thought it would be a good idea to implement it from scratch as an alternative to using some third-party library or framework for this purpose.
In the first half of the video, we create the structure (HTML), styling (CSS) and functionality (JavaScript) for a basic modal, which can be triggered upon a button click and dismissed upon a click over the modal close button or the modal backdrop (background overlay). We then proceed to adding an entrance and exit animation to the modal, and finally, we make the necessary modifications in order to take into account the case where more than one modals exist in our page.
Enjoy 🙂
Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comments section below!
Code for this Project: codepen.io/Coding_Journey/pen...
Modal Examples based on this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Share Selected Text with JavaScript: • Share Selected Text wi...
HTML Drag and Drop API: • HTML Drag and Drop API
Marquee-like Content Scrolling (HTML & CSS): • Marquee-like Content S...
Simple Auto-Playing Image Slideshow (HTML, CSS and JavaScript): • Simple Auto-Playing Im...
Animations with Animate.css: • Animations with Animat...
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
![[UNCUT] ที่นี่ที่แรก ปู - หาญส์ พูดถึงมหากาพย์หนี้สิ้น I คนดังนั่งเคลียร์ I 10 ก.ค.67](http://i.ytimg.com/vi/KDNA9DZ0p4U/mqdefault.jpg)
Dear Sir, you’ve made a very difficult job so easy. Many developers seems to struggle making the reusable modals script. Your efforts are the answer of many many young and new developer’s prayer. We love you. Thank You so much for sharing your knowledge. Take care and Stay Safe. The world needs developers like you.
Oh thank you so much for this amazing comment 🙏 My pleasure 🙂 Indeed, my goal was to create a nice, reusable modal component and I am very glad to hear that this is useful to fellow developers!! Love is mutual 😉 You too, take care, all the best!!
You are the best teacher of java script on youtube. Topics that are really hard to understand watching other youtube tutors, get really easy after watching your tutorials. If you had any courses on udemy or skillshare I would parchuse them straight away.
Oh thank you so much mate! Comments like yours make me want to come back to creating web dev tutorials 🙂 Wishing you all the best in your web dev journey! Huge love 💙
Best Modal tutorial on TH-cam !!
Thank You !!
Oh thank you for the lovely comment!! Very glad you think so 😉💙💙
That was as good as it gets 👍👍🙏 Thank you so much man, exactly what I was looking for! Keep up the great work 💖
Thank you for the lovely comment 🙂 Very glad it helped! I will 😉💙
Huge thanks for this tutorial man! It's amazing how you answer all of my questions before even asking 😊👏 Thank you 🙏
Heheh!! Absolutely delighted to hear that 🙏🙂
Everything is very well explained. Your videos are getting better and better. I learned so many things. Never heard about defer attribute. Well done !
Thanks so much for the lovely feedback Frank! Always trying to improve...not always successful though, but that's life 😄 I hope in the long term, trend will be upward 🙂 Absolutely love your channel, so I'm humbled by your nice words!! Keep up the great work!!!
Brilliant Sir! Thank you!
Thank you Sir 😉🙂
This is bloody amazing free content. Thank you brother
Oh thanks bro! My pleasure 🙂💙
A really nice tutorial. You give a surprisingly detailed and complete explanation, even on side topics that have nothing to do with a modal. This gives a complete overview. Maybe, I make a vue js version, thanks for the inspiration. Keep it going, Bro. ✌😀
Thanks so much for taking the time to watch and provide feedback Mario! You are awesome 🙂 I'm trying to explain as much as I can, but maybe I should resist that urge sometimes since I end up with a long video...it's a double-edged sword...I don't know, hope I'll find the sweet spot at some point 😄 Vue js modal sounds nice 😉 Looking forward to your next video Mario! Keep it up!!!
Coding Journey Yeah, I know what you mean. You can try different things and in the end you see in the analytics what is good or not. We are still completely at the beginning of our journey and start from the bottom. 😂
Analytics know nothing, I know better 😂 kidding of course...I suppose this would be a recipe for stagnation 😄 A good thing about being a small channel is the freedom to experiment with less stress 🙂 Keep going bro...and, in the meantime, let's not forget to enjoy the journey!!! 🙂
💯🔥 Excellent tutorial thank you!!!!
Amazing!! Glad you enjoyed it 🙂
Thank you very much ! I like your videos which teaching style is step by step. Keep coding ❤
My pleasure, thanks for the support!! You too 😉💙💙
Many thanks for the tutorial, keep up the good work
Thank you, will do 😉💙
greate jobs, thank you sir. (from indonesia)
Very nice! Glad you liked it 🙂 Greetings to Indonesia!!
Amazing content. !!!
Quick questions ! If I were using html blocks to construct this in elementor, is it possible to split these into four html blocks, all held inside the same page. One block as the main block containing the trigger buttons, and the rest of the three blocks will contain the modals themselves. would this work? im having issues with too much code in one block and my page stability is suffering.
Would this code have to change at all if I were to proceed as I described above.
Can you make a tutorial how to build modal form edit data like this tutorial ? Without use modal botstrap
Hello how to code Close modal when I click ESC ?
Hey! I think what you are looking for starts at 37:20 🙂 All the best, keep coding!! 😉🍻
@@CodingJourney wow thanks 😍