Very clean solution, thanks! For anyone looking to expand functionality a bit, you can add the onclick="togglePopup()" to the overlay class to trigger closing the modal by clicking anywhere off of the popup. I also added: document.addEventListener('keydown', function(event){ if(event.key === "Escape"){ document.getElementById("popup-1").classList.toggle("active"); } }); to the JS to include the Escape key press as a method of closing the popup.
@@Codingflag Subscribed! Keep these coming, very helpful for those getting started in JS. One last suggestion for those implementing this solution. I suggest editing your CSS to keep the .popup .content fixed in the middle of your screen regardless of where the div is placed. Use the following: position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
Isn't we need to make an if statement before it? if(document.getElementById("popup-1").classList.contains('active')) then so on... Because if user press ESC key before opening the pop-up, it will trigger the toggle("active") and showing the pop-up without pressing the pop-up button
What I genuinely disdain about programming and hate it: is that you can copy everything to the T, and it's going to work in the tutorial, but won't work on your end. fck
Thank you, it was very helpful! if possible, may i get the code for adding 2 pop-ups in the same page? I couldn't figure out how to do it as I'm still new to coding.
create 2 id for 2 popups ( 2 popup html elements ) and mention id name in custom attribute like data-popup on button. using this you can create only one js function and inside it you can get id name by using event.target.getAttribute("data-popup"). So you don't need do create different javascript functions for each popup.
@@Codingflag do i have to paste the "CSS" & "JS" codes simply below the "HTML" code. I tried that but it doesn't work, the result was only showing the content's message Sorry my knowledge is just elementary
Hey, I see you are active in the comments, so I was hoping you knew how to make it so the pop-up stays centered in the middle of the screen a follows as you scroll down the webpage? love the vids
Hi sir thankyou but sir I have a doubt you used a button for showing the pop-up but sir I want a text which is clickable and when we will click it the pop-up will come so sir please help me out please sir
Hello sir! this really came in handy for me. My problem is that I made two buttons with different pop-up contents and whatever I open, it shows only one pop-up content (the one for the first button). Help me please!
@@Codingflag right! worked for me this way: function togglePopup(){ document.getElementById("popup-1").classList.toggle("active"); } function togglePopup2(){ document.getElementById("popup-2").classList.toggle("active"); } THANK YOU SIR!
Create div element inside popup container and assign header class to it. Add css styles to that header. You can add image directly into popup container by using img tag
thanks you sir for your reply , but sir i want to know that: Image already add in header and i want to click on image than pop up appears ( some text message). Sir kindly also guide me where i can add coding of pop up? thanks
Replace togglePopup function with below code: Codepen link for demo:- codepen.io/dsr/pen/XWMZbqq function togglePopup(){ let popup = document.getElementById("popup-1"); if(popup){ popup.classList.toggle("active"); if(!popup.classList.contains("active")){ popup.parentElement.removeChild(popup); } } }
Hi Darshan, I have been trying to create a filterable blog portfolio where I can filter multiple blog posts and then when I click on the blog, it needs to open up in a popup just like you showed in this video. Can you please guide me as to how can I go about making this happen? I'm new to web development and I have started using wordpress for the same.
the popup shows for a sec and then the site renders, how can i stop it from rendering so it will show the popup window till someone press the close btn?
Hey bro it's really helpful but the problem is IE older versions like IE7 or IE8, don't support "transform css" or "getElementById" so how do we do it for older versions of IE?
@@Codingflag I fixed it is was a typo on my end it actually works perfectly. Thank you for this add some more tips and tricks maybe to to convert blocks to flex using css
Great Video! I have a question for my project. I have multiple popups and I was able to make it show but how do you make it so that if the user were to click anywhere off of the popup it would close. I have been trying to use a function to compare the class hierarchy, but I can't figure it out. Here is my JS code /* This Works! function togglePopup(idname){ document.getElementById(idname).classList.toggle("active"); } */ function togglePopup(elementId) { //comparing if(document.getElementById("popup-1").id == elementId) { document.getElementById(idname).classList.toggle("active"); } else { alert('It Works'); } }
Thanks for the reply. I changed my code a lot since I saw this message. I am now having trouble adding multiple modals. Can you help me here is my code. JS: // Get the button that opens the modal var btn = document.querySelectorAll(".modal-button"); // All page modals var modals = document.querySelectorAll('.modal-container'); // Get the element that closes the modal var spans = document.getElementsByClassName(".modal-exit"); document.addEventListener("DOMContentLoaded", () => { document.querySelector(".modal-button").addEventListener("click", function() { document.querySelector(".modal-container").classList.add("fade-in"); }) document.querySelectorAll(".modal-exit").forEach((elem) => { elem.addEventListener("click", () => { document.querySelector(".modal-container").classList.remove("fade-in"); }) }) }) CSS: .modal-container { visibility: hidden; display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100vh; transition: all .2s linear; opacity: 0;
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
@@Codingflag Could you elaborate on this solution briefly? I have added unique classes but it does not seem to work properly. The only method I have found is to duplicate the entire JS script and change the ID values for a new popup, but this doesn't feel like the cleanest solution...
My bad, I mean to say create 2 id for 2 popups ( 2 popup html elements ) and mention id name in custom attribute like data-popup on button. using this you can create only one js function and inside it you can get id name by using event.target.getAttribute("data-popup"). So you don't need do create different javascript functions for each popup.
Very clean solution, thanks! For anyone looking to expand functionality a bit, you can add the onclick="togglePopup()" to the overlay class to trigger closing the modal by clicking anywhere off of the popup. I also added:
document.addEventListener('keydown', function(event){
if(event.key === "Escape"){
document.getElementById("popup-1").classList.toggle("active");
}
});
to the JS to include the Escape key press as a method of closing the popup.
Great. Simple suggestion to make user experience more better.
@@Codingflag Subscribed! Keep these coming, very helpful for those getting started in JS. One last suggestion for those implementing this solution. I suggest editing your CSS to keep the .popup .content fixed in the middle of your screen regardless of where the div is placed. Use the following:
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Isn't we need to make an if statement before it?
if(document.getElementById("popup-1").classList.contains('active'))
then so on...
Because if user press ESC key before opening the pop-up, it will trigger the toggle("active") and showing the pop-up without pressing the pop-up button
nice effors. But if you press Esc again, it will again toggle back active class
it will be nicer if you provide us code link in description
This is very helpful , I have been scrolling through the internet for two days but your video help me a lot! thank you for creating this video!
Happy to hear that!
This was the video that I really needed to complete the JS on my personal site. THANK YOU SO MUCH!!
complete sir thank for giving tihs informatical video,,,, this is very useful video 100/10
Most welcome
Holy shit bro, u're a fucking hero!!! all the afternoon lookin' for a simple method and finally God sent me your video!!!
I don't have words to say, but really this video is so helpful for me
Thank you so much Brother
Glad it helped
Hi. Thank you for this helpful video.
Glad it was helpful!
Thank you, used this in my first website project allthough I have no idea what 80% of the css refers to :D
Oh it’s great solution. Saved my project)) thank you
Glad it helped
Which program are you using? Soeasy and flexible.. Great video by the way 👊🚀
codepen
Minor Bug: 1. is not require. The width set in .popup needs to be 100% inspite of 100vh
oh mannnnnn.......
finally i m able to make these popups... thanx a lot
What I genuinely disdain about programming and hate it: is that you can copy everything to the T, and it's going to work in the tutorial, but won't work on your end. fck
This is cool, however the background of dark black is switched with the white background of the text. Can anyone help me?
Simple and effective thank you!
Glad it was helpful!
This was very helpful. Thank you - I just subscribe
Thanks for the sub!
The best!
Thank you, it was very helpful!
if possible, may i get the code for adding 2 pop-ups in the same page? I couldn't figure out how to do it as I'm still new to coding.
You can create same clone of popup element
create 2 id for 2 popups ( 2 popup html elements ) and mention id name in custom attribute like data-popup on button. using this you can create only one js function and inside it you can get id name by using event.target.getAttribute("data-popup").
So you don't need do create different javascript functions for each popup.
@@Codingflag Got it! Thank you very much for explaining.
perfect job
Great job! Thank you for helping me. I was looking for a simple solution.
Great to hear!
very helpful! thanks,
Really good tutorial, thank you very much !!
Thankyou so much Brother It helped me alot 🔥 respect for you brother ❤️🙏
thank you bro, nice tutorial.
Glad it helped
I love the song bro ❤
Nice video at all 👍and can i embed this popup into a blogger website if so , how please???
Copy paste the code in code section of blogger
@@Codingflag do i have to paste the "CSS" & "JS" codes simply below the "HTML" code. I tried that but it doesn't work, the result was only showing the content's message Sorry my knowledge is just elementary
Wrap your css in style tag and js code in script tag
@@Codingflag i put it in the blogger as in the link above, but not working 😢
Share what you have added so that I can help.
Is it a combo of all languages or is there a separate version in all 3 languages? I tried this. It didn’t work. 😓
Thanks for doing this!
Nice sir pura pop-up banana sikha diya wo bhi bina kisi backchodi ke ❤
Thanks😊😊
Muito obrigado.
Hey, I see you are active in the comments, so I was hoping you knew how to make it so the pop-up stays centered in the middle of the screen a follows as you scroll down the webpage? love the vids
use position sticky
So helpful thank you
But I dont know why my close button doesnt work :(
Can you share your code so that I can help to debug.
Can i use img onclick event instead of button?
How can I center the window?
Edit: I centered the button and now the popup window appears on the left but only half of it.
Thanks for the video!
Nice video, thank you!
my popup is not working ..after click not display anything ????what i do
i followed all the steps, the closing button doesnt work
Closing the window doesn't work and I checked line by line.
Hy
I want to show without clicking "Show Popup" Botton how I can do that?
Please must reply!!
Use CSS :hover to show popup
@@gamerox007 This is more clear but if anyone is confused. Just add under
@@stephcurry2350 i'm curious to know how to time it out by 5 seconds.
Which IDE you are using?
codepen
Hi sir thankyou but sir I have a doubt you used a button for showing the pop-up but sir I want a text which is clickable and when we will click it the pop-up will come so sir please help me out please sir
Add click event listener to text element instead of button
@@Codingflag thankyou bro and please bro give a shoutout to me in your channel and tell your viewers to subscribe please bro
Hello sir! this really came in handy for me. My problem is that I made two buttons with different pop-up contents and whatever I open, it shows only one pop-up content (the one for the first button).
Help me please!
use two id for two popups
@@Codingflag right! worked for me this way:
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup2(){
document.getElementById("popup-2").classList.toggle("active");
}
THANK YOU SIR!
@@mihaibalan1917 DUDE...thank you for this...I needed this EXACT solution...and after searching for months I finally got it to work!!
@@akadwriter glad I could help! 🤘🏻
If we have several buttons and want to have different popups for each of them which code should be applied?
You can refer this pen.
codepen.io/dsr/pen/wvoXMgE
@@Codingflag I am really thanks about your help. Fantastic support. It worked very well . Appreciate man. 🤗
How do we put it to center? Thanks
If you create 5 buttons like this. How would you edit each button content that displays in the middle when the button is clickes ???? Any ideaaa
Do you want different buttons for different popups?
@@Codingflag yes. But it was the same functionality tho. Where text is changed in the middle ?
Check this code: codepen.io/dsr/pen/wvoXMgE
awesome video , but Sir I want to create pop up text message on a header image with CSS coding kindly guide me
Create div element inside popup container and assign header class to it. Add css styles to that header. You can add image directly into popup container by using img tag
thanks you sir for your reply , but sir i want to know that:
Image already add in header and i want to click on image than pop up appears ( some text message). Sir kindly also guide me where i can add coding of pop up? thanks
so attach click handler to image tag instead of button.
Thx 🍍🍍
You’re welcome 😊
how to make close by clicking cross icon
how did you link css file to html file ? watch the hole video but still confused
You can either write css into same html file using style tag or create style.css file and link it with
ok thank you so much
can you tell me,after closing the pop up,it will never come bcak.what code i will use for this?
Replace togglePopup function with below code:
Codepen link for demo:- codepen.io/dsr/pen/XWMZbqq
function togglePopup(){
let popup = document.getElementById("popup-1");
if(popup){
popup.classList.toggle("active");
if(!popup.classList.contains("active")){
popup.parentElement.removeChild(popup);
}
}
}
Hi Darshan, I have been trying to create a filterable blog portfolio where I can filter multiple blog posts and then when I click on the blog, it needs to open up in a popup just like you showed in this video. Can you please guide me as to how can I go about making this happen? I'm new to web development and I have started using wordpress for the same.
You can attach click event listener on blog post & inside click handler you can toggle active class on popup element.
I have been using wordpress to build this. Are there any plugins that you can let me know which provides to his functionality directly?
No. You need to put custom script to get this.
the popup shows for a sec and then the site renders, how can i stop it from rendering so it will show the popup window till someone press the close btn?
Add popup HTML dynamically using JavaScript
what does .active mean? is it same ass pseudo class selector?
Sorry for late reply. I am using active class to maintain state of popup and applying styles based on that state.
my pop is going back side of the slider and image
@Codingflag I want this code
FOr me it says ReferenceError: Can't find variable: togglePopup do you know why
Please share your code so that I can help
It’s not working for me well the closing part
What error you are getting?
Hey bro it's really helpful but the problem is IE older versions like IE7 or IE8, don't support "transform css" or "getElementById" so how do we do it for older versions of IE?
you can only toggle display property.
@@Codingflag okay but what will be the alternative for getElementById?
@@priyam40 use querySelector
@@Codingflag okay..thanks bro:)
Hi,
It is very helpful, but i want to get input and display it in popup how to do that ?
Use Form and onsubmit close popup and get input values
can u tell me the name of the program you working with pls
codepen
@@Codingflag thanks a lot
Getting a problem output appears outside the button instead of inside
Can you share your code so that I can help.
ty
how could i get the code ?
sir close buttom is not working please let me know the soloution
Can you share your code with error message on instagram.
instagram.com/codingflag
@@Codingflag thery are not any error meassage apparently just Close "X" Button is not working i will share a code in you instagram
more simpler
set a paragraph display none and use it as popUp
how do i keep the pop up while i open another one?
is it possible in javascript?
Yes. Maintain popup state in variable and close popup if you open another popup.
@@Codingflag
sorry i'm noob
but do you have a sample code?
My program is not working it only I have written it same to same then also yar popup is not opening only
Can you share your code so that I can help.
@@Codingflag HELP ME
how to make popup automatic on load?
Add below line at end of javascript code.
togglePopup();
Hello
Can you give me a code for a popup without javascript please ?
You can find code link in description.
why my close btn not working :'
any error on console?
Links?
close button not working on me
Please comment down your code so that I can help
close button doesnt work?
Put your code here
@@Codingflag I fixed it is was a typo on my end it actually works perfectly. Thank you for this add some more tips and tricks maybe to to convert blocks to flex using css
I am having the same issue, can you tell me what worked for you?
Great Video!
I have a question for my project. I have multiple popups and I was able to make it show but how do you make it so that if the user were to click anywhere off of the popup it would close. I have been trying to use a function to compare the class hierarchy, but I can't figure it out.
Here is my JS code
/* This Works!
function togglePopup(idname){
document.getElementById(idname).classList.toggle("active");
}
*/
function togglePopup(elementId)
{
//comparing
if(document.getElementById("popup-1").id == elementId)
{
document.getElementById(idname).classList.toggle("active");
}
else {
alert('It Works');
}
}
Thank you.
You can checkout this video for the same.
ua-cam.com/video/YKPkDFs5DGY/v-deo.html
Please let me know if any issues.
Thanks for the reply. I changed my code a lot since I saw this message. I am now having trouble adding multiple modals. Can you help me here is my code.
JS:
// Get the button that opens the modal
var btn = document.querySelectorAll(".modal-button");
// All page modals
var modals = document.querySelectorAll('.modal-container');
// Get the element that closes the modal
var spans = document.getElementsByClassName(".modal-exit");
document.addEventListener("DOMContentLoaded", () => {
document.querySelector(".modal-button").addEventListener("click", function() {
document.querySelector(".modal-container").classList.add("fade-in");
})
document.querySelectorAll(".modal-exit").forEach((elem) => {
elem.addEventListener("click", () => {
document.querySelector(".modal-container").classList.remove("fade-in");
})
})
})
CSS:
.modal-container {
visibility: hidden;
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
transition: all .2s linear;
opacity: 0;
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0 ,0, .5);
}
.modal {
position: relative;
width: 500px;
height: 300px;
//Styling
background: #fff;
border-radius: 5px;
box-sizing: 0 3px 15px rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
font-family: "fot-rodin-pron", sans-serif;
font-weight: lighter;
text-align: center;
span.modal-exit {
position: absolute;
top: 0px;
right: 0px;
font-weight: bold;
font-size: 0px;
}
}
.modal-exit { cursor: pointer; }
}
.fade-in {
visibility: visible !important;
z-index: 99;
opacity: 1;
}
HTML:
×
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique
@@Codingflag
please give me the source code
How could you add 2 popups on the same page?
create 2 popup id & if you want to change position then modify top / left property accordingly
@@Codingflag Could you elaborate on this solution briefly? I have added unique classes but it does not seem to work properly. The only method I have found is to duplicate the entire JS script and change the ID values for a new popup, but this doesn't feel like the cleanest solution...
My bad, I mean to say create 2 id for 2 popups ( 2 popup html elements ) and mention id name in custom attribute like data-popup on button. using this you can create only one js function and inside it you can get id name by using event.target.getAttribute("data-popup").
So you don't need do create different javascript functions for each popup.
mine didnt work
what error do you got?
No error I got no Java script in Dreamweaver
dont works
im so sad
Please comment down your code
link to download codepen plz
Check code link in description.
Send all code
How to name JavaScript File?
Didn't get you
Codingflag How do I name the File with script in because when i name it “togglepopup” its not working
Codingflag I need more help (i can pay) can u add me on dc?
@@swiopolskisw Message me on instagram if you need help
instagram.com/codingflag
Heyy...Please help me
Button is not working.. why????
Can you share your code here .. or DM me on instagram