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