Wednesday 1 April 2015
popup box using (Html,Javascript,Css)
<html >
<head>
<title>Untitled Document</title>
<style>
#abc {
width:100%;
height:100%;
opacity:.75;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
}
img#close {
position:absolute;
right:-3px;
top:-3px;
cursor:pointer;
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family:'Raleway',sans-serif;
}
form {
max-width:450px;
min-width:350px;
padding:10px 50px;
border:2px solid gray;
border-radius:7px;
font-family:raleway;
background-color:#fff;
}
p {
margin-top:30px
}
h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0;
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc;;
}
</style>
</head>
<body>
<li><a href="#" onClick="div_show()" ><span class="mfiles"><img src="images/add.png"/>Add</span></a></li>
<div id="body" >
<div id="abc">
<div id="popupContact">
<form action="raju.html" method="post" enctype="multipart/form-data" name="form1" id="form1" style="overflow:hidden">
<img id="close" src="closebutton.png" onclick ="div_hide()">
<div><strong>Single File Upload </strong></div>
<div>Select file </div>
<div><input name="ufile" type="file" id="ufile" size="50" /></div>
<hr>
<div><input type="submit" name="Submit" value="Upload" /></div>
</form>
</div>
</div>
<script>
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
</script>
</body>
<html>
<head>
<title>Untitled Document</title>
<style>
#abc {
width:100%;
height:100%;
opacity:.75;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
}
img#close {
position:absolute;
right:-3px;
top:-3px;
cursor:pointer;
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family:'Raleway',sans-serif;
}
form {
max-width:450px;
min-width:350px;
padding:10px 50px;
border:2px solid gray;
border-radius:7px;
font-family:raleway;
background-color:#fff;
}
p {
margin-top:30px
}
h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0;
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc;;
}
</style>
</head>
<body>
<li><a href="#" onClick="div_show()" ><span class="mfiles"><img src="images/add.png"/>Add</span></a></li>
<div id="body" >
<div id="abc">
<div id="popupContact">
<form action="raju.html" method="post" enctype="multipart/form-data" name="form1" id="form1" style="overflow:hidden">
<img id="close" src="closebutton.png" onclick ="div_hide()">
<div><strong>Single File Upload </strong></div>
<div>Select file </div>
<div><input name="ufile" type="file" id="ufile" size="50" /></div>
<hr>
<div><input type="submit" name="Submit" value="Upload" /></div>
</form>
</div>
</div>
<script>
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
</script>
</body>
<html>
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment