I want to share my knowledge regarding How to create a popup using javascript.
so first we will create html. Inside html we will need popup so, we will use DIV tag like below.
<div id="popup">
<div id="innerpopup" >
<a href="javascript:close();" style="float:right;margin-right:10px;">Close</a><br/>Hello World
</div>
</div>
In above we used two div.
1. One div id is popup. This div actually cover the whole body so, we can click anywhere inside the body.
2. Second div id is innerpopup. This div is actually used to display the content of popup.
In above Div. We need to add some property to make it popup. So we need Css. Using Css we can define the property of div.
#popup{
position:absolute;
width:100%;
height:100%;
display:none;
top:0px;
left:0px;
background-color:#c0c0c0;
opacity:0.8;
filter: alpha(opacity = 80);
}
#innerpopup{
width:400px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:200px;
background-color:#534435;
}
In above Css I define the popup width and height 100 percent so, it will cover the whole body
and the important point i define the popup div as absolute to overlay the body.
Now we need javascript to show and hide the popup.
function show()
{
document.getElementById('popup').style.display ='inline';
return;
}
function close()
{
document.getElementById('popup').style.display ='none';
return;
}
so, Below is the whole code.
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
<head>
<title> Pop Up </title>
<style type="text/css">
#popup{
position:absolute;
width:100%;
height:100%;
display:none;
top:0px;
left:0px;
background-color:#c0c0c0;
opacity:0.8;
filter: alpha(opacity = 80);
}
#innerpopup{
width:400px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:200px;
background-color:#534435;
}
</style>
<script type="text/javascript">
function show()
{
document.getElementById('popup').style.display ='inline';
return;
}
function close()
{
document.getElementById('popup').style.display ='none';
return;
}
</script>
</head>
<body>
<div><a href="javascript:show()">Show</a></div>
<div id="popup">
<div id="innerpopup" ><a href="javascript:close();"
style="float:right;margin-right:10px;">Close</a>
<br/>Hello World
</div>
</div>
</body>
</html>
so first we will create html. Inside html we will need popup so, we will use DIV tag like below.
<div id="popup">
<div id="innerpopup" >
<a href="javascript:close();" style="float:right;margin-right:10px;">Close</a><br/>Hello World
</div>
</div>
In above we used two div.
1. One div id is popup. This div actually cover the whole body so, we can click anywhere inside the body.
2. Second div id is innerpopup. This div is actually used to display the content of popup.
In above Div. We need to add some property to make it popup. So we need Css. Using Css we can define the property of div.
#popup{
position:absolute;
width:100%;
height:100%;
display:none;
top:0px;
left:0px;
background-color:#c0c0c0;
opacity:0.8;
filter: alpha(opacity = 80);
}
#innerpopup{
width:400px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:200px;
background-color:#534435;
}
In above Css I define the popup width and height 100 percent so, it will cover the whole body
and the important point i define the popup div as absolute to overlay the body.
Now we need javascript to show and hide the popup.
function show()
{
document.getElementById('popup').style.display ='inline';
return;
}
function close()
{
document.getElementById('popup').style.display ='none';
return;
}
so, Below is the whole code.
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
<head>
<title> Pop Up </title>
<style type="text/css">
#popup{
position:absolute;
width:100%;
height:100%;
display:none;
top:0px;
left:0px;
background-color:#c0c0c0;
opacity:0.8;
filter: alpha(opacity = 80);
}
#innerpopup{
width:400px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:200px;
background-color:#534435;
}
</style>
<script type="text/javascript">
function show()
{
document.getElementById('popup').style.display ='inline';
return;
}
function close()
{
document.getElementById('popup').style.display ='none';
return;
}
</script>
</head>
<body>
<div><a href="javascript:show()">Show</a></div>
<div id="popup">
<div id="innerpopup" ><a href="javascript:close();"
style="float:right;margin-right:10px;">Close</a>
<br/>Hello World
</div>
</div>
</body>
</html>
No comments:
Post a Comment