JavaScript Popup window - Popup Login Form

In this video, we will discuss, how to open a popup window using JavaScript.
Create a simple modal popup using HTML, CSS, and Javascript. In this video, we create a popup login form that appears when a button is clicked.
This is my tutorial about making your own popup message or Form with CSS and JavaScript.
Please subscribe to our channel more Website Design Tutorial.
Facebook / umtutorial

[@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

[@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.

[@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!

[@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

[@getintosuccess8198]

wow.. thanks for this tutorial

[@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

[@BaziJo]

thank you for this video very nice

[@stefanpfadt4353]

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

[@jiyathhiba]

Great work,😍

[@harishshimpi16]

it work realy thank u

[@azizbekdevelopper1728]

very good

[@shravyamutyapu3658]

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

[@patitorodri]

great tutorial, thank you! good music

[@UMTutorial]

Glad it was helpful!

[@milllktea7]

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

[@subrahmanyapoojari1362]

It's because of visual studio code live preview extension

[@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

[@BlissTrove0011]

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

[@goyangyi]

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

[@janithukwattage1004]

Thank you very much ❤️

[@091_nadhiraazzahra3]

thank you so much!

[@OnePiece_Fandom]

Thanks bro

[@UMTutorial]

Welcome

[@ruszjea]

Thanks

[@UMTutorial]

Welcome

[@rodcastillosuarez8291]

me sirvio a la perfección

[@deliveryasahi3147]

what is your function?

[@vidiegkd8852]

👍👍

[@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

[@AtulSharma-xt3xy]

which text editor are you using

[@jainamshah3691]

Visual code microsoft

[@aaronruddell7448]

@@jainamshah3691 visual studio code*

[@rodcastillosuarez8291]

suscrito gracias por enseñar suscrito

[@alejandragomez3726]

ok but how to do it in react ?

[@deliveryasahi3147]

when i click the button its not working for me

[@royalguptatelecom7870]

Same problem 😭

[@vidiegkd8852]

Sir how do I contact you ?

[@murselparlak2677]

thank you

[@mehdiabderrahmaneyahiaoui4700]

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

[@alien4606]

Thanks bruh

[@UMTutorial]

Happy to help

[@ozgureren8925]

unbelievable

[@RayyanCovers]

What's the music anyone ?

[@codingjaipur]

Can you help me sir.।

[@saqlainshaikh3336]

I want source code

[@winsomeblaise8866]

Source code please Urgent

[@nandinikose1414]

Code?

[@bukqueiroz]

oh my god i fucking love u

[@technicianjakir3908]

need picture

[@coder134]

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") '

[@PSPALAN1]

Thanks Bro

[@abdurrazzak1612]

thanks

[@devacreatortech]

source code