Create Popup Login Form using HTML, CSS & JavaScript
ฝัง
- เผยแพร่เมื่อ 8 มี.ค. 2021
- 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.
Thanks soooo much for this I've added more to my knowledge and I'm soo grateful
Awesome bro ! You really did a nice work
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 , is it possible to validate the fields with the class as well?
No. If you are using form element then you can use html validations otherwise you need to implement it from scratch using javascript.
How's it going Jonathan?
How far along on your journey?
Great video! Where can I find the source code?
Thank you sooo much! gonna be working on something similar for login/register.
Glad it helped!
very useful
Ótimo vídeo parabéns ✌.
Thanks bro that was a great help
Glad it helped
thanks👍👍
thanx this help me a lot
You're welcome!
thank you sir
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;
}
👌
i have a question the animation doesnt work or pop up at all
no pop up showing even though i had no error encounter
Hey i love the video, which platform you are using ?
codepen online editor
What text editor are you using?? I use Sublime Text and Visual Studio Code but yours is better.
codepen
@@Codingflag hello, yo did not show how to connect the javascript to the html, hope youll notice me.
@@Codingflag can you share the source code please, if it possible. thank you
is it possible to download the finished?
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!
Is it working properly in browser ?
@@Codingflag
is not working
WOW! can i make the popup only appear when a specific user clicks on it, e.g. guest?
For that you need to add validations
Thanks so much for making this .
But after 9:16 opacity and transform are not working for me
Can you share your code on instagram so that I can check
Same :"
GREAT! I Have been praticing this! Thank You The Subscribe Button Is Much Closer
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.
use position fixed
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 >. Can you help me please
Can you share your code in comment so that I can help
I had the same error but it was because I forgot the . in my query selector. For example, if you gave your button an id = "add-btn" then your querySelector would be ("#add-btn) and it would be (".add-btn") if it was a class. I can't see your code, so apologies if your issue was different.
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
can you share your code so that I can help.
Can I get the Source Code..?
?
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.
Where is it the link
What link are you talking about
good afternoon, i like your video but i found a problem in my coding, i.e. if the button has more than one java script it only works on the first object. how to make the java script work for more than one object. I really look forward to your reply 😁
Apply below changes so that it will add listeners on all buttons.
HTML:
Login
JavaScript:
document.querySelectorAll(".show-login").forEach(function(el, i){
el.addEventListener("click",function(){
document.querySelector(".popup").classList.add("active");
});
});
thank you
after I try the problem is not completely solved. the new problem is if any button is clicked it only appears on the first object
can you share your code so that I can check.
hi thank you but opacity and transform are not working
me too
Nice work 👏
I tried it but i had problem with the popup, it didn't apear no matter what i did
Can you share your code so that I can help to debug.
@@Codingflag I got the same problem
Yup, I went ahead and watched the video a third or fourth time, and instead of trying to alter it to my requirements, I followed every line to the letter, and no popup. I've put the link to the js file in both the header and at the bottom of the body, still no popup.
@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(){
document.querySelector(".popup").classList.add("active");
});
docuent.querySelector(".popup .close-btn").addEventListener("click", function(){
document.querySelector(".popup").classList.remove("active");
});
I am using VS Code
Thank you!
why is the opacity and transform deosnt work in the transition ?
It should work .. can you paste css here so that I can help
it's not working on me😭
Check your button class
After the login page how the web page will pop up???
Either you need to provide login button to open popup when its clicked or you can open popup automatically once page is loaded.
my javascript is not working....do I need to add some script link?
No. Any error on console? Message your code on instagram so that I can check.
instagram.com/codingflag
for those of you who get an error where the login form doesn't appear, in the js script add the hashtag # in front of show-login like this :
document.querySelector("#show-login").addEventListener("click",function(){
document.querySelector(".popup").classList.add("active");
});
then your login form will popup
it's not working, pls help
still not working.
Bro how to conect css to html its not conecting why
i am not able to open the popup screen when i click
Can you share your code here so that I can help.
Hi. Can u pls help me..
When I'm clicking on the login button the login page is not showing
me too
can you share your code so that I can help to debug.
@@Codingflag how shld I send?
There are couple of spelling mistakes ..
CSS -
1) "transform" instead of "tranform"
2) There is no space between .popup.active
(It should not be like .popup .active )
JavaScript -
3) Spelling of addEventListener is wrong.
Please correct it & let me know still you are facing any issues.
@@Codingflag kk tqq i will try once again
Hello the Javascript part is not working. Please help
Can you share your code so that I can help to debug.
can someone help me, the javascript didnt work im using vscode
any error on console?
the button is not working, i gave it the same id but doesnt work
Can you share your code so that I can help
@@Codingflag where should i give uh the code
upload it on codepen or github and share link here.
@@Codingflag i need it fixed , do check it quick
Why does mine pop out only for like 0.1sec? I copied everything in the video
if you using instead of button, add "href=#" on your attribute, mine works well
my javascript is not working , how can i fix it please ?
Can you share your code so that I can help.
@@Codingflag
i did
helppppp, the popup wouldn't show T^T
Whats the mistake here?
document.querySelector("#show-login").addEventListener("click",function(){
document.querySelector(".popup").classList.add("active");
});
document.querySelector(".popup .close-btn").addEventListener("click",function(){
document.querySelector(".popup").classList.remove("active");
});
There is no mistake. Can you share entire code so that I can help to debug.
@@Codingflag it's working now, I had to put down before the ending tag of body.
@@sabeeli7814 meaning?
You need to put script tag at the end of body tag so that querySelector will have access to rendered DOM elements.
@@sameermysterio1092 I put script tags before the ending tag of body . I hope you got it now.
Ye video falutu hai working nahi karata hai active
Where is active class in html page
Its added dynamically using javascript
@@Codingflag oo thanku but my script didn't work
can you share your code so that I can help
how to fix the javascript is not working??
im using notedpad ++
Can you share your code so that I can help.
not working sir your code
What error you are getting ?
source code
This doesn't work. It doesn't pop up.
when i click login the popup doesn't open please help
iam using laravel
Any error on console after you click on button?