JavaScript Popup window - Popup Login Form

[@Coderoffootball]

Thank you bro, this is my 30 days of practice to be a programmer/developer, I just love a video that explaining, Thank you bro👊

[@BruddaRobb]

You are the goat thank you kindly. At first it was not working but then I moved my script from an external file to my html doc as you've done here and voila! I still have to figure why it wasn't working. THANK YOU

[@ma_verite]

It been a long time I try to do a popup form with J.s thank you so MUCH your code is sooooo clean

[@UMTutorial]

Happy to help!

[@nahushzilpilwar5564]

your video nice , because i watch almost 10 videos before this video all are very difficult to understand , but this video i understand first 5min.

[@abdurrazzak1612]

your code was so clean.

[@maci3985]

thats what im talking about that why he is the MVP , THAT WHY HES THE GOOOOOAAAAT THE GOOOOOOOAAAAAAAAT

[@hoihoi7409]

It's important to add an event listener that when you press outside the white box, it closes.

[@sahilmalhotra6464]

Nice video 10/10

[@SandyRocker]

awesome bro

[@gautam6405]

very good tutorial

[@UMTutorial]

Glad you think so!

[@AmnaHussain-j7q]

Hello, I have a query for you. I've made six goods and am attempting to insert this code into the order now button, however neither the popup nor multiple buttons are working, nor is the code displaying in the full window. Please assist me.

[@getintosuccess8198]

wow.. thanks for this tutorial

[@jiyathhiba]

Great work,😍

[@azizbekdevelopper1728]

very good

[@BaziJo]

thank you for this video very nice

[@patitorodri]

great tutorial, thank you! good music

[@UMTutorial]

Glad it was helpful!

[@harishshimpi16]

it work realy thank u

[@osamawaseem7006]

Great Tutorial But one advice that don't use music in such videos they distract from work but Thanks Again For sharing your knowledge

[@stefanpfadt4353]

WOW! can i make the popup only appear when a specific user clicks on it, e.g. guest?

[@uzairchougule]

How can i add animation like it slides down after i click on the login button i know a little gsap but idk how to apply any help would be appreciated

[@shravyamutyapu3658]

what piece of code should be added in order to make the text in boxes disappear after clicking on login

[@milllktea7]

how do you have the index.html on the right side preview?

[@subrahmanyapoojari1362]

It's because of visual studio code live preview extension

[@janithukwattage1004]

Thank you very much ❤️

[@091_nadhiraazzahra3]

thank you so much!

[@goyangyi]

is it javascript?
i think the title should be changed😧
thanks for the good video

[@BlissTrove0011]

on adding contents to body part ,overlay of popup goes down.

[@Amelia1602]

May i know where to download your button.png ? i tried alot of close button but the sizes shown on my webpage are big

[@rodcastillosuarez8291]

me sirvio a la perfección

[@PSPALAN1]

Thanks Bro

[@ishaankothidar3044]

everyone shows this type of code but login button could be on everypage now i can't put div popup in every page.
I really want to know how i can use different file login.html as popup or modal in any other file. I can't find the solution anywhere when I m trying I m getting error.

[@moezAhmed94]

create a new file and include this file in every page

[@vidiegkd8852]

👍👍

[@AtulSharma-xt3xy]

which text editor are you using

[@jainamshah3691]

Visual code microsoft

[@aaronruddell7448]

@@jainamshah3691 visual studio code*

[@murselparlak2677]

thank you

[@alien4606]

Thanks bruh

[@UMTutorial]

Happy to help

[@ozgureren8925]

unbelievable

[@mehdiabderrahmaneyahiaoui4700]

Hello thanks for your tutorial i want to add a close on clicking outside how can i do that?

[@deliveryasahi3147]

what is your function?

[@rodcastillosuarez8291]

suscrito gracias por enseñar suscrito

[@alejandragomez3726]

ok but how to do it in react ?

[@abdurrazzak1612]

thanks

[@deliveryasahi3147]

when i click the button its not working for me

[@royalguptatelecom7870]

Same problem 😭

[@RayyanCovers]

What's the music anyone ?

[@vidiegkd8852]

Sir how do I contact you ?

[@codingjaipur]

Can you help me sir.।

[@winsomeblaise8866]

Source code please
Urgent

[@saqlainshaikh3336]

I want source code

[@bukqueiroz]

oh my god i fucking love u

[@technicianjakir3908]

need picture

[@nandinikose1414]

Code?

[@devacreatortech]

source code

[@eartherkushwah]

what is the problem in this code:
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
None Print
.container h1{
color:green;
font-size:36px;
margin-bottom:50px;
}
.button{
background-color:red;
color:white;
text-transform:uppercase;
font-size:20px;
border-radius:2px;
box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75);
margin:35px;
padding:5px 20px 5px 20px;
text-decoration:none;
transition:0.5s;
}
.button:hover{
background-color:black;
color:white;
}
.popup{
background-color:rgba(0, 0, 0, 0.7);
width:100%;
height:100%;
position:absolute;top:0;
display:none;
justify-content:center;
align-items:center;
text-align:center;
}
.popup-content{
height:500px;
width:500px;
background:#fff000;
padding:20px;
border-radius:50%;
position:relative;
}
input{outline:0px;
margin:20px auto;
padding:8px;
width:50%;justify-content:center;
border:2px solid gray;
display:block;
}
input[type=text]{
border-radius:30px 30px 0px 0px;
}
input[type=password]{
border-radius:0px 0px 30px 30px;
}
.close{
position:absolute;
width:20px;
height:20px;
border-radius:50px;
top:5px;
left:95%;
cursor:pointer;
}
.roundshap{
color:red;
border:2px solid green;
padding:0px;
margin:0px;
width:80%;
position:absolute;
bottom:100px;
left:50px;
border-radius:50px;}
Look At This
Login Now !







Login


document.getElementById(".button").addEventListener("click", function(){
document.querySelector(".popup").style.display = "flex";});
document.getElementById(".close").addEventListener("click", function(){
document.querySelector(".popup").style.display="none";});

[@m-2718]

I know I am half a year late, but heck I found the error and I going to say what is wrong >w>
In document.getElementById(".button").addEventListener("click", function(){ there should be no "." Before button and same with close there shouldn't be "." and also there should be id = "close"

[@ismetgusic3186]

@@m-2718 also ' document.getElementById(".close") ' in to ' document.querySelector(".close") '

[@OnePiece_Fandom]

Thanks bro

[@UMTutorial]

Welcome

[@ruszjea]

Thanks

[@UMTutorial]

Welcome

[@coder134]

source code

[@johnrhovicjuliado347]

thanks