JavaScript Popup window - Popup Login Form
HTML-код
- Опубликовано: 8 фев 2019
- 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
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
It been a long time I try to do a popup form with J.s thank you so MUCH your code is sooooo clean
Happy to help!
wow.. thanks for this tutorial
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.
your code was so clean.
thank you for this video very nice
Great work,😍
great tutorial, thank you! good music
Glad it was helpful!
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.
thats what im talking about that why he is the MVP , THAT WHY HES THE GOOOOOAAAAT THE GOOOOOOOAAAAAAAAT
Thank you very much ❤️
very good
It's important to add an event listener that when you press outside the white box, it closes.
awesome bro
thank you so much!
May i know where to download your button.png ? i tried alot of close button but the sizes shown on my webpage are big
me sirvio a la perfección
it work realy thank u
very good tutorial
Glad you think so!
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
Thanks Bro
thank you
what piece of code should be added in order to make the text in boxes disappear after clicking on login
thanks
unbelievable
WOW! can i make the popup only appear when a specific user clicks on it, e.g. guest?
suscrito gracias por enseñar suscrito
👍👍
Thanks bruh
Happy to help
Hello thanks for your tutorial i want to add a close on clicking outside how can i do that?
Thanks
Welcome
Thanks bro
Welcome
how do you have the index.html on the right side preview?
It's because of visual studio code live preview extension
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.
create a new file and include this file in every page
Great Tutorial But one advice that don't use music in such videos they distract from work but Thanks Again For sharing your knowledge
which text editor are you using
Visual code microsoft
@@jainamshah3691 visual studio code*
on adding contents to body part ,overlay of popup goes down.
oh my god i fucking love u
is it javascript?
i think the title should be changed😧
thanks for the good video
What's the music anyone ?
Sir how do I contact you ?
what is your function?
ok but how to do it in react ?
when i click the button its not working for me
Same problem 😭
Can you help me sir.।
Code?
Source code please
Urgent
I want source code
need picture
source code
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";});
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"
@@m-2718 also ' document.getElementById(".close") ' in to ' document.querySelector(".close") '
source code