Create a Modal (Popup) with HTML/CSS and JavaScript
HTML-код
- Опубликовано: 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
Excellent tutorial! Short, sweet, and to the point -- and it WORKED!! Thank you!
Taking a front end class in masters, you just saved my assignment. deserve a subscribe. :)
Well done, Florin. I actually like this kind of mini-js projects. It helps me to grasp how DOM JS works.
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!
Your tutorial is awesome!!!! It is simple, straightforward and kind of easy to follow. Please keep up your good work.
I think I'm addicted to the sound effects at the beginning of your videos. So digital! 😀👍
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.❤
Thanks, Florin! Loved your way of explaining!
Thank you, super easy to follow!
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 ?
Thanks again Florin, you are the best !
the best modal js video i have ever seen, thanks for share with us.
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
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.
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.*
thank you for this tutorial! it was really easy to understand and follow.
Too useful thing explained in too less time . ..amazing👍 thank you sir
superb explaination ! Simple n easy ! Learnt a lot in short time . Thank you 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!
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?
That was what I need, thank you :)
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!
This tutorial was great!
Appreciate you
Helped me solve an issue
Wow learnt too many things in just 10 mins🙂 thank you sir
awesome! thank you so much!
Damn, man TY very much! U saved me ^^
Love the video. Thank you.
Thank you. How do i get the modal to open automatically when the index of a site is accessed?
Excelent tutorial. Good work
Thank you for this tutorial
What can I do if I want to allow the user to close the modal just clicking outside the modal box?
Thank you so much..
Well done Florin!
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
Nice Florin Thank you for sharing.
hey, how to refresh, scrollTop modal? e.x. boostrap modal - Scrolling long content, how to? help? tutorial?
So smooth.
Thank you so much that was very helpful !
Glad it was helpful!
Please make such short videos.. Many things to learn
nice men, but i have a question, how disable scroll when open the modal
Thank you!
Vreau sa devin programator ca tine Florin!
Thank you so much
very nice, do you have source code listed somewhere? that will definitely help many of us to save some time too.
WOW! can i make the popup only appear when a specific user clicks on it, e.g. guest?
thank you it helped me
Glad to hear!
I'm having problems, when I put fixed position it fixes the whole page and when it opens, it doesn't close
Great Video!!!!
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.
Why not make display none instead of switching opacities?
thank you!
Is it possible that when you click the close me button, it will lead you to next webpage?
What name of code editor used
which ide u r using
Thank you
how to make one for each item in table?
Nice!
where can we get the code
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
that's a great video. +1 sub
is it gonna work when we put an image instead of button. please reply.😯
Great tutorial. I like this mini project. Thank you.
How i do it with SessionStorage y localStorage?
How to set automatic popup when page load
The next Brad Traversy... mark my words!!
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
After era of long live streaming here comes small video tutorial which we all love😍😍🤘🤘🤘
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.
I just made this in Vue! :) and Tailwind on my channel, what a coicidence :)
could you tell the directory of the source code in github
Very nice
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
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?
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
Can we use display:none instead of opacity ?
You wouldn’t have the transition
@@FlorinPop got my answer..
Thanks
LOVE YOU
thanks
awesome
Thanks
how to make nested modal
I like this 👍.
Amazing
Thanks sr
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. :)
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! 👍👍👍
mine doesn't work please help! the button does nothing!
Awesome
Pointer-events not working help me please sir
nice video
🔥🔥
Hello !
Thanks, that's great !, now how to make it responsive? (sorry for my english, i'm French ^^)
cant close the model, the button is unclickable. tried cahnging the z.index nothing work
Please share your code to save us time keying it. and just experiment with it. Thanks
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.
you should have shared your code for practising
Best
where is the source code for this modal
Is this responsive?