Java Script Function For Closing Window
In this post I will tell you some functions of java-script to display and
hide any item on the Web page. If you want a button’s on-click function to make
any element hide or show then here we are with the java-script function.
Actually whenever you click on any button
then it performs an on-click action which can be use to show or hide some
component on the web page so lets get started.
//** Code is here **//
<!DOCTYPE html>
<html>
<head>
<title>Intoduction</title>
<link
rel="stylesheet" type="text/css" href="intro.css">
</head>
<body>
<header
id="head"><h2>Coder99</h2></header>
<ul
class="toplist">
<li>About</li>
<li><button
class="login"
onclick="document.getElementById('loginbox').style.display =
'block'">Login</button></li>
<li>Navigation</li>
<li>Contact
Us</li>
</ul>
<div id="loginbox">
<h3>Login</h3><hr><br>
Username
<input type="text" name="name"><br>
Password
<input type="Password" name="Password"><br>
Age
<select>
<option>select</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select><br><br>
<button
class="submit">Submit</button>
<button class="close" onclick="document.getElementById('loginbox').style.display
= 'none'">X</button>
</div>
</body>
</html>
Check out For Better understanding
//**** CSS file saved as intro.css ****//
body
{
margin:
0px;
background:
url("Image Path");
background-size:
cover;
}
#head
{
background
:url("Image path") ;
color:
white;
padding:
.5em;
margin-bottom:
2px;
}
.toplist
{
list-style-type:
none;
padding:
0px;
margin:
0px;
position:
fixed;
margin-left:
40.5%;
}
.toplist li
{
background-color:
green;
color:
white;
width:
7em;
padding:
.3em;
float:
right;
margin-right:
2px;
text-align:
center;
overflow:
hidden;
}
#loginbox
{
height:
14em;
width:
21em;
background-color:
lightyellow;
padding:
.3em;
text-align:
center;
border:
3px solid black;
border-radius:
1em;
position:
fixed;
margin-left:
17em;
margin-top:
5em;
display:
none;
}
.close
{
height:
2em;
width:
2em;
background-color:
darkred;
border-radius:
2em;
float:
right;
margin-top:
-13em;
color:
white;
}
.login
{
background-color:
green;
width:
8em;
border:
none;
color:
white;
}
.submit
{
height:
4em;
width:
6em;
background-color:
black;
color:
white;
border:
none;
border-radius:
1.6em;
}
input
{
margin-bottom:
2px;
}
//***
Save the file and Enjoy Try your own as well ***//
Comments
Post a Comment