How To Create A Modal In Javascript and CSS
ฝัง
- เผยแพร่เมื่อ 17 มิ.ย. 2018
- Today we are going to learn how to create a simple modal in javascript and css. Feel free to edit the modal the way you want. This tutorial does not use Bootstrap or any other css frameworks or javascript frameworks.
~-~~-~~~-~~-~
Follow my Twitter:
/ deved94
Please watch: "Should You Become A Software Engineer?"
• Video
~-~~-~~~-~~-~ - แนวปฏิบัติและการใช้ชีวิต
I just love your tutorials, it's so easy to learn and your personality makes it even better. Really fun. Thank You
Dope! Thanks a lot for this man! Super easy to follow for a beginner like me haha
i've watched 3 different tutorials for this, seems so hard, can't believe it's this simple, thanks man.
This was a really cool and easy way to use JavaScript.
Thank you!
Dude, thanks so much for this! This was quick and easy and worked like a charm.
Hey! Just wanted to say that I really appreciate your work and your sense of humor! :)
I have watched Dev's videos, and although he sound very very unserious, he is very very helpful. Thanks man, your Javascript course was very helpful.
I'm rebuilding the frontend of this full stack project without Bootstrap. I hate dealing with CSS but I must learn to work with it if I have to. One of the things to replace are modals. Thank you so much. 👏👏👏
Love this man🤙 if i need any component, i watch your tutorial
Thanks a lot Dev. Ed. You're the best
Awesome, I'll be integrating this for my production grade application. Thankyou so much.
Thank you for putting this video together! you are an excellent teacher! Greetings from Ecuador
you don't need an additional container div to darken other things up, this can be done with the box-shadow property;
sth like this will do the trick : box-shadow: 0px 0px 0px 100vw rgba(0,0,0,0.6);
apply this on your box an you wont need the container.
great video ,thanks
And when the demon came into our world, he blocked out the sun, and we were all engulfed in his shadow.
congrats man, what a tutorial
Thanks bro for sharing your knowlegde with us, Saludos desde Honduras.
thank you so much you helped me out with a school project and I learned something new!
amazing man! thank you!
It's awesome. Thank you Ed.
thanks man, i really appreciate it!
OMYG. IT WORKED 😭 Thank you for this, sir!
This was helpful, thanks!
Finally I have managed to create a modal with js .. thanks man
Thanks, buddy, I was having a hard time before watching your video. And again, thanks bro.
thank you for your totorials!
Helped alot, thanks :D
I want to say so many thanks! Very helpful! I
Thanks Dev Ed for all
you code butter smooth bro!
Bro you saved my life with this! I just kinda gave up and stared at my screen for an hour but now I see what I was doing wrong! Thank you!!
I’d recommend watching the tutorial on it first, then after you have an idea practice building it on your own, instead of building it on your own before you watch the tutorial. It will save you from losing your hair.
Genio! te sigo desde Argentina y a pesar qu eno entienda muy bien ingles, disfruto muho tus videos.
absolutely helpful thanks a lot
Big Bro, it really helped. Thanks.
Wow you are the master man I really appreciate your work your videos really help me
You are amazing man keep going ❤️❤️❤️
Great video!
Amazing!
Hey man you are the best
Thanks so much!
Спасибо !!! то что нужно для понимания !! долго искал
Thank you so much!
Thank you so simple so undestandable good job teacher
Your videos are very simple and you explain really well. You make Js very much interactive. Even 2021 this is the best Tutorial i have seen. Thanks. I want to know how i can get the complete course.
Really.. awesome like very helpful for me 💗
Love you too all your
Thank you for sharing Ed 😂 don't be too nervous dude !!
hi am new in web development i just got your lesson very straight forward approach very nice.
It is a great tutorial simple explanation and a great approach. It will be better also show us how to apply the close event when the user click the outside of the module
Thank you bro 💓
how can you add animation on like it comes from top to the center. and to click on an empty space to close it. how to do that?
Great vedio
Best teacher ever
gracias capo te agradezco muchisimo
Would the tag simplify this tutorial?
the papa bless made my heart happy c:
thankyou very much sir
hey, how to modal popup - createElement and innerHTML? open and close btn?
Thank you for sharing your knowledge!
Congratulations on your talent in making what is difficult to learn easy to learn for people like me who are just starting out.
thank u bro becz of i make this model
Nice video, maybe update with the arrow function. Thanks for sharing.
I have an array of objets with has properties, I want it show them on click event, but don´t no how to show e.target.value imagen with each object :s
IT IS AWESOME
yeah when the content overflows it doesnt show the header part of modal its chopped off.
i got a problem.. i have modal with some photos that can be closed by clicking on its background, but when i open one photo (opens as another modal) and close it by clicking its background I cant close the first modal by clicking its background. It works only when i don't open any photo. Am I doing something wrong? maybe its not good to make modal in modal or something..
i use for both modals (with different names obviously):
window.onclick = function closeModal (event)
{
if (event.target == imgModalBg)
{
imgModalBg.style.display = 'none';
}
}
Perhaps you could add the functionality of closing the modal by clicking outside of it?
why dont use display property css?
great question! I don't use display: none because that cannot be transitioned. So we cannot have the "fade in effect" :)
@@developedbyed thanks for clearing my doubts Dev Ed. You're the best
Why the X to close de modal top and right 10 px, always takes you to that point?
👍👍👍👍
Hi Ed, what if you use the modal class to multiple elements of the page for different content to show up in the modal itself. Making it a reusable modal. How would you go about that? Could you please make a tutorial about that. Thank You so much
did you figure it out?
I'm guessing you'll create an array of objects with information, then forEach of those add an event listener so that when they're clicked on, or whatever, the contents of the modal will be specific to each object
Hi I'm tryning to show in a modal the value of a item inside a list group. Can you help in this?
Thanks for the upload. I followed the directions and code to make my first modal and it only seemed to work on Code Pen but as soon as I plugged it into Visual Studios Live Server it didnt work. Anyone know why?
The button is there but when I click it it does not open the modal.
❤❤
Can I just use modal to make a basic light box?
I've been really digging your videos. I do have a question though. How easy would it be to use this for multiple modals? For example, I'm creating my portfolio and I have a total of six projects listed on the home page and I'd like to fire a different modal for each project. This is awesome but it's only good for one modal and I'm trying to wrap my head around how to create multiple modals without going overboard in the code. Anyway, great work. Your videos are very engaging and entertaining.
If all your modals are similar ( 1 header and paragraph etc). You could just use one modal in your html. When you want to have a different one you could change the textContent of them with javascript. Otherwise you would pretty much have to create multiple html modals and show and hide them with js.
@@developedbyed It would be great if you could do a part-two on the multiple modals - can't find anything online that explains how to do it as simply as you do
@@zahradeenie you don't need multiple. Just one modal and change the contents dynamically with JavaScript
I have the exact same requirements. Did you find a potential solution? Could you help me if you did?
Dev: Nothing does anything
Me: Anything does Nothing
Love your video bro! Ignore that I just made fun of you coz this video helped me a lot.
I'm serious 😑😶😐
You can Use "×" for the Cross Sign. Ex:
×
The Result will be like This: ×
Thankl you
Please tell theme you used for this video
Nice pace of tutorial, except I would have liked to see the first (top) half of the CSS code so I could replicate everything while learning.
how do we do it with gsap?
Hello !
Thanks, that's great !, now how to make it responsive?
It only works if the modal and the button are on the same page. What if you want the model and the button separated in two different HTML pages.. how do you get it to work then?
Include the html, javascript and css code in every page of your project. It's that simple. I hope you still need this
This is the easiest Modal I've ever seen
Thank you for your great tutorials! I wish you had the html and css code on github or similar for us to copy and paste. Would make it quite a bit easier to get into the js.
Yes yes yes yes, someone please help!!!!!!!!
les fucking gooooooooooooo!
How to make modal unscrollable?
I am having troubles when i try to apply it to two buttons. The first one works fine but the second doesn't. Any help would be appreciated.
You would need to use document.querySelectorAll and use a for loop to go through all the indexes in the array that creates.
i wanted the modal to be on top of my content but it keeps scattering the arrangement
Is the visibility: hidden needed? Isnt just the opacity: 0 enough to hide the modal?
'cause if you put just opacity, all in the modal still there, but not visible, so the user can interact with everything there. It's like an invisible box. When you put the visibility: hidden, the modal is hidden, it's like is no modal there.
And he use both, because one complement the other, and opacity is better for transition.
I hope you can undertand this, I am not so good in english haha
Ok i see, but there is also pointer events: none which would do the same in combination of opacity and is more often used by people. So opacity would make the box invisible and pointer events would make it non interactive with a user. Am i right?
@@adison2117 yes, you can use pointer events and use just opacity
sir my js code is not working i am not getting why?
This is great, and really helped me. However, I have 3 buttons that need to open 3 separate modals, and I although all three of them open (one at a time), I cannot get the last two to close.
From what I can tell, my code looks identical. However, none of the code, after hidden visibility including the js, seems to be working for me. Any pointers? No pun intended :D
Can you copy paste your code on github?
@@developedbyed Yes! Please follow this link. Thank you!
github.com/annielly/balance
th-cam.com/video/8A6mqAu4llg/w-d-xo.html
this video has source code with explanation
i can't see the start of the css..
please ! show us the start of css code !
How to close the modal by clicking outside of it
window.addEventListener('click', (event) => {
if(event.target === modal) {
modal.classList.remove('bg-active');
}
});
can you please share all of your css code ?
th-cam.com/video/8A6mqAu4llg/w-d-xo.html
this video has source code with explanation
Where did you get the .bg-active in CSS sir? im just a beginner I hope you notice my comment. Godbless! =)
You add/create the class in CSS and then use JavaScript classList.add to add it to the html element when the button is clicked.
Can you share the code
thanks (^_^)/
Source code?
did not work for me 😭😭😭😭
Why though? It should work.
Didnt work
Could you send me a source code please :)