Create a Modal (Popup) with HTML/CSS and JavaScript
ฝัง
- เผยแพร่เมื่อ 16 เม.ย. 2020
- 👉 Daily Coding Challenges: iCodeThis.com/?ref=ytb-modal
In this tutorial, we're going to learn how to build a #Modal / #Popup using HTML, CSS, and a little bit of #JavaScript to toggle a class.
---
Follow me on:
📃 Website/Blog: florin-pop.com
👉 Twitter: / florinpop1705
👉 Linkedin: / florinpop17
👉 Instagram: / florinpop17
👉 Github: github.com/florinpop17
👉 Twitch: twitch.com/florinpop17
short concise and crisp. Exactly what I wanted. Thank you
This is one of the best modal tutorials I've tried and the first one to actually help me implement it into my site! Thank you!
Well done, Florin. I actually like this kind of mini-js projects. It helps me to grasp how DOM JS works.
Excellent tutorial! Short, sweet, and to the point -- and it WORKED!! Thank you!
Your tutorial is awesome!!!! It is simple, straightforward and kind of easy to follow. Please keep up your good work.
I was really struggling with creating a Modal of my own. I was tangled in min-height, max-height. Could not even center the Wrapper div. Great video. Position fixed made a perspective a little clearer. Thank You.❤
Taking a front end class in masters, you just saved my assignment. deserve a subscribe. :)
I think I'm addicted to the sound effects at the beginning of your videos. So digital! 😀👍
I am glad to have found your page coz I get to learn awesome stuffs with your easy-to-comprehend-tutorials.
You're really good. Thanks for sharing such wonderful tutorials.
Thanks, Florin! Loved your way of explaining!
Wow, I love this waiting for more like this.
I have learned something new like *pointer-event* how this works.
Thank you And *must always use JS in your every Tutorial.*
Thanks a lot!
I was struggling with popup modal you gave me the basic idea to execute what i was planning , It helped me a lot
superb explaination ! Simple n easy ! Learnt a lot in short time . Thank you florin .
the best modal js video i have ever seen, thanks for share with us.
Thanks again Florin, you are the best !
Thank you, super easy to follow!
Too useful thing explained in too less time . ..amazing👍 thank you sir
wow, watched too many videos abuse youtube's 10min rule, it feels awesome to see something beautiful made in this time, thanks
Glad you like it 😄
You prolly dont give a shit but if you're bored like me atm then you can watch all the latest movies and series on InstaFlixxer. Been streaming with my brother for the last few days :)
@Jeremias Cristian yup, have been using Instaflixxer for since december myself :D
@@FlorinPop Can I get the code ?
thank you for this tutorial! it was really easy to understand and follow.
Wow learnt too many things in just 10 mins🙂 thank you sir
That was what I need, thank you :)
Appreciate you
Helped me solve an issue
Hey Florin!
Great video, as always. Love the way you quickly explain every step.
One doubt.. could/or does it make sense to use classList.toggle instead of the .remove & .add?
You are right!
Thank you so much that was very helpful !
Glad it was helpful!
This tutorial was great!
Love the video. Thank you.
Excelent tutorial. Good work
awesome! thank you so much!
Well explained thanks!
Struggling with modals. But yours works fine. Thanks
Update… works fine as a stand alone HTML file. But does not work in Bootstrap Studio. The search continues
Hi Florin, thank you for the tutorial! I'm pretty new to HTML/CSS/JS and wanted to implement an info button that would create a modal popup when clicked upon. For some reason, when I click the button, the background becomes darker but the modal doesn't show for some reason. I tried following along on a fresh project with nothing else on it, and I was able to make the modal appear when copying and pasting the code I wrote on the previous project. Do you have any idea why this might be occurring?
Nice Florin Thank you for sharing.
Well done Florin!
I feel like this sounds silly but it would be a great help to have a copy of the code. When i set pointer-events to none i still can't click the button 7:12 . Also can't figure out why my 'click me please' button centered horizontally. Either way thank you for posting!
Thank you so much..
Thank you for this tutorial
Damn, man TY very much! U saved me ^^
So smooth.
I just made this in Vue! :) and Tailwind on my channel, what a coicidence :)
Please make such short videos.. Many things to learn
Great Video!!!!
thank you it helped me
Glad to hear!
Great tutorial. I like this mini project. Thank you.
Thank you!
Thank you so much
Vreau sa devin programator ca tine Florin!
nice men, but i have a question, how disable scroll when open the modal
Thank you. How do i get the modal to open automatically when the index of a site is accessed?
After era of long live streaming here comes small video tutorial which we all love😍😍🤘🤘🤘
that's a great video. +1 sub
Nice!
very nice, do you have source code listed somewhere? that will definitely help many of us to save some time too.
Thank you
for everyone that is asking why the button can't click nor open the modal, i wanna know if u guys r using or no. if yes then u have to place it in not in . it works for me.
Or you can add the “defer” attribute on the script tag
thank you!
Thank you - A very good one.
But how would we disable the scroll bar and any scrolling.
You could set the body to be overflow hidden.
excelent tutorial bro, m ai scos din belea! XD
o singura rugaminte as avea daca se poate sa ti egalezi levelul (dB) al muzicii cu cel al vocii pe final ptr ca diferenta de volum e uriasa.... am sarit din scaun! lol
Merci inca o data! 👍👍👍
Very nice
LOVE YOU
I like this 👍.
thanks
Thanks
Thanks sr
Amazing
awesome
hey, how to refresh, scrollTop modal? e.x. boostrap modal - Scrolling long content, how to? help? tutorial?
Awesome
Why not make display none instead of switching opacities?
What can I do if I want to allow the user to close the modal just clicking outside the modal box?
is it gonna work when we put an image instead of button. please reply.😯
The next Brad Traversy... mark my words!!
Is it possible that when you click the close me button, it will lead you to next webpage?
how to make one for each item in table?
nice video
Question! you defined the modal inside the container(overlay). now is there a way to close the modal by clicking the gray area?
also thanks for the great content!!
Yes, you can put a click eventlistener on the div with the gray area which will remove the 'show' class from the modal container
Hello !
Thanks, that's great !, now how to make it responsive? (sorry for my english, i'm French ^^)
How to set automatic popup when page load
Great tutorial on creating a Modal....I am trying to pass data(unordered list) from a html page to another html page or modal. Can data be passed into Modal and should I use local storage, any suggestions would be appreciated.
You can use that, yes.
🔥🔥
which ide u r using
Hello Florin.
Thanks for all your videos :)
Just one question: how can we add emojis on Codepen like you did?
Thank you in advance.
Have a good week :)
Windows + .
@@skidget1607 Thanks a lot :)
@@skidget1607 Thank you. :)
Hey Florin, awesome tutorial. Perfectly worked with me. However, could you please explain to me how can I make multiple modals to open when clicking multiple buttons. I mean the following: I have a card gallery, and every card has a "Read more" button, which shows different information. Thanks in advance and keep up the awesome work! Best wishes from Bulgaria 💙
In that case, your modal would be like a component because you would use it a couple times. The best for that is working with Classes. It's a little bit more advanced but really saves you on the long run.
@@valentepablo Comment is 1 year old I hop you guys doing well in life. but maybe someone reading it now, I'll suggest a trick from my limited knowledge.
1. Assume modal has a heading h1 tag, and a body with tags ; give them unique IDs
2. Every read more button invokes a function , this functions takes "text and headline" as input.
3. you can read the text from a text file or just write in the js file.
4. this function receive the text and headline , and use it to change the "innerText" property of modal .
5 . now the h1 heading tag is changed with your given headline and tag with detailed paragraph.
6. Every readmore button has a unique Id , according to that ID ,the function can change modal text every time with different text and headline.
WOW! can i make the popup only appear when a specific user clicks on it, e.g. guest?
How i do it with SessionStorage y localStorage?
how to make nested modal
What name of code editor used
Can we set click me button's z-index:1; instead of setting modal-container to pointer-events: none; so the button can be on top of the modal-container ? Also set the modal-container display: none; , and from there in javascript style it to display: 'block'; when the button even listener is clicked.
You won’t have the transition with display
where can we get the code
Can we use display:none instead of opacity ?
You wouldn’t have the transition
@@FlorinPop got my answer..
Thanks
could you tell the directory of the source code in github
Best
you should have shared your code for practising
I'm having problems, when I put fixed position it fixes the whole page and when it opens, it doesn't close
What if I need 1000x modals? Then I'd have quite many unnecessary layers of js running on a website. Isn't there any way of creating the modals dynamically?
total beginner here. when i try to do this, I always get: 'open is null'
no idea why, I am working in cs code, referencing the .js from the HTML header using
any tips?
the standard form is tu put the script tag at the bottom of body tag.
make sure you passed the "open" id to the html BUTTON tag and your DOM selector is not having a problem.
its all about debugging bro :D
Pointer-events not working help me please sir
I love you Dl. Florin
I prefer a no-code popup builder like Popupsmart as I have no code knowledge. Veery easy
Please share your code to save us time keying it. and just experiment with it. Thanks
Why not use visibility: hidden ?
Because you cannot see a transition using visibility.
mine doesn't work please help! the button does nothing!