How To Create A Modal In Javascript and CSS
HTML-код
- Опубликовано: 17 окт 2024
- 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
~-~~-~~~-~~-~
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.
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. 👏👏👏
Would the tag simplify this tutorial?
I just love your tutorials, it's so easy to learn and your personality makes it even better. Really fun. Thank You
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.
i've watched 3 different tutorials for this, seems so hard, can't believe it's this simple, thanks man.
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.
Finally I have managed to create a modal with js .. thanks man
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
hi am new in web development i just got your lesson very straight forward approach very nice.
Hey! Just wanted to say that I really appreciate your work and your sense of humor! :)
OMYG. IT WORKED 😭 Thank you for this, sir!
This was a really cool and easy way to use JavaScript.
Thank you!
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.
Thank you so simple so undestandable good job teacher
Love this man🤙 if i need any component, i watch your tutorial
Thanks bro for sharing your knowlegde with us, Saludos desde Honduras.
congrats man, what a tutorial
Really.. awesome like very helpful for me 💗
Love you too all your
Dope! Thanks a lot for this man! Super easy to follow for a beginner like me haha
Thanks a lot Dev. Ed. You're the best
thank you so much you helped me out with a school project and I learned something new!
Dude, thanks so much for this! This was quick and easy and worked like a charm.
Best teacher ever
the papa bless made my heart happy c:
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.
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
Perhaps you could add the functionality of closing the modal by clicking outside of it?
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?
Genio! te sigo desde Argentina y a pesar qu eno entienda muy bien ingles, disfruto muho tus videos.
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 code butter smooth bro!
Thank you for sharing Ed 😂 don't be too nervous dude !!
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';
}
}
Hi I'm tryning to show in a modal the value of a item inside a list group. Can you help in this?
Hello !
Thanks, that's great !, now how to make it responsive?
Great vedio
Thanks Dev Ed for all
Thanks, buddy, I was having a hard time before watching your video. And again, thanks bro.
absolutely helpful thanks a lot
Hey man you are the best
Wow you are the master man I really appreciate your work your videos really help me
thanks man, i really appreciate it!
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
I want to say so many thanks! Very helpful! I
amazing man! thank you!
Can I just use modal to make a basic light box?
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
Спасибо !!! то что нужно для понимания !! долго искал
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
thankyou very much sir
Thank you bro 💓
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
thank u bro becz of i make this model
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
Thanks so much!
Amazing!
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.
Why the X to close de modal top and right 10 px, always takes you to that point?
Please tell theme you used for this video
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.
It's awesome. Thank you Ed.
You are amazing man keep going ❤️❤️❤️
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.
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?
hey, how to modal popup - createElement and innerHTML? open and close btn?
You can Use "×" for the Cross Sign. Ex:
×
The Result will be like This: ×
Thankl you
This was helpful, thanks!
Nice video, maybe update with the arrow function. Thanks for sharing.
This is the easiest Modal I've ever seen
Big Bro, it really helped. Thanks.
thank you for your totorials!
Great video!
gracias capo te agradezco muchisimo
IT IS AWESOME
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
ruclips.net/video/8A6mqAu4llg/видео.html
this video has source code with explanation
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.
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.
yeah when the content overflows it doesnt show the header part of modal its chopped off.
how do we do it with gsap?
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!!!!!!!!
Helped alot, thanks :D
How to make modal unscrollable?
sir my js code is not working i am not getting why?
👍👍👍👍
❤❤
i wanted the modal to be on top of my content but it keeps scattering the arrangement
i can't see the start of the css..
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 ?
ruclips.net/video/8A6mqAu4llg/видео.html
this video has source code with explanation
please ! show us the start of css code !
les fucking gooooooooooooo!
Can you share the code
wtf what is the start css?????????????????????????????????????????????????????????????
Source code?
Didnt work
did not work for me 😭😭😭😭
Why though? It should work.
thanks (^_^)/
Could you send me a source code please :)