Create Popup Login Form using HTML, CSS & JavaScript

In this video, I will show you how you can easily create popup based login form using HTML, CSS & JavaScript. You can easily create popup login form / popup sign in form / modal login form / modal sign in form with animations using css properties like opacity, transform and add show / hide functionality using JavaScript.

[brainchessnovice]

Thanks soooo much for this I've added more to my knowledge and I'm soo grateful

[juancarloscortes]

i have a question the animation doesnt work or pop up at all

[twospartansgaming]

Awesome bro ! You really did a nice work

[SebgasFlowx]

Great video bro, i'm very thankful with your tutorial,
I have quite a question (I'm still learning web), so since the html is using the class "form" to create the froms and it's not using the element of html <forrn>, is it possible to validate the fields with the class as well?

[piyqkzw]

is it possible to download the finished?

[jeremyzz]

Great video! Where can I find the source code?

[daniloborreros]

no pop up showing even though i had no error encounter

[vladislavdukhovnik]

after reading some comments I've found the issue. There is no space between .popup and .active . Here is the correct way :
.popup.active {
top: 50%;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transition: top 0ms ease-in-out 0ms,
opacity 200ms ease-in-out 0ms,
transform 20ms ease-in-out 0ms;
}

[Kreytonchild]

Thank you sooo much! gonna be working on something similar for login/register.

[familiar]

Hello, I have problems on 9:04 on the video, the opacity and transform is not being recognized. I use Visual Studio Code. Thank you!

[stefanpfadt]

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

[samannoyb]

What text editor are you using?? I use Sublime Text and Visual Studio Code but yours is better.

[KVW_Channel]

Why the html code wont can't display the css in google chrome, i've already put the stylesheet code but the css won't triggered

[mawt]

Hello I have problems with the js script in your video about the pop up, as I said my Js doesn't worked and I have this error message << scripts.js:1 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at scripts.js:1:38 >>. Can you help me please

[saymuslims]

Bro how to conect css to html its not conecting why

[wongsengkuan]

Hello, guys at first I encountered error when click the login button it does not pop up anything, but when I paste the javascript link at the end of body, everything is working then. Hope this comment will help those who have problems.

[yossefcohenzardi]

hi thank you but opacity and transform are not working

[SxlarSiren]

why is the opacity and transform deosnt work in the transition ?

[sthefaniegloor]

Thank you for your video! Do you know how to center the popup in the screen? I want the popup to stay in the middle of the screen even if I scroll up/down.

[thewarriors]

@Codingflag i really need help no matter what all i do it does not popup i will share the java script i had type pls help me debug it

docuent.querySelector("#show-login").addEventListener("click", function(){

});
docuent.querySelector(".popup .close-btn").addEventListener("click", function(){

});

I am using VS Code
Thank you!