Javascript popup is the most popular and cool Javascript effects for websites, as a web developer or designer we can apply this cool Javascript effects very easy in our projects. If your wonder on how to create a popup div in your own hand. In this tutorial I would like to share on how to create a pop up div effect using the Javascript.
In this Javascript example we create a Javascript popup div in ‘on click trigger’ event, that pop up displays with opacity background and it will remains center the popup.
Complete Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function openpopup(id){
//Calculate Page width and height
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
//Make the background div tag visible...
var divbg = document.getElementById('bg');
divbg.style.visibility = "visible";
var divobj = document.getElementById(id);
divobj.style.visibility = "visible";
if (navigator.appName=="Microsoft Internet Explorer")
computedStyle = divobj.currentStyle;
else computedStyle = document.defaultView.getComputedStyle(divobj, null);
//Get Div width and height from StyleSheet
var divWidth = computedStyle.width.replace('px', '');
var divHeight = computedStyle.height.replace('px', '');
var divLeft = (pageWidth - divWidth) / 2;
var divTop = (pageHeight - divHeight) / 2;
//Set Left and top coordinates for the div tag
divobj.style.left = divLeft + "px";
divobj.style.top = divTop + "px";
//Put a Close button for closing the popped up Div tag
if(divobj.innerHTML.indexOf("closepopup('" + id +"')") < 0 )
divobj.innerHTML = "<a href=\"#\" onclick=\"closepopup('" + id +"')\"><span class=\"close_button\">X</span></a>" + divobj.innerHTML;
}
function closepopup(id){
var divbg = document.getElementById('bg');
divbg.style.visibility = "hidden";
var divobj = document.getElementById(id);
divobj.style.visibility = "hidden";
}
</script>
<style type="text/css">
<!--
.popup {
background-color: #DDD;
height: 300px; width: 500px;
border: 5px solid #666;
position: absolute; visibility: hidden;
font-family: Verdana, Geneva, sans-serif;
font-size: small; text-align: justify;
padding: 5px; overflow: auto;
z-index: 2;
}
.popup_bg {
position: absolute;
visibility: hidden;
height: 100%; width: 100%;
left: 0px; top: 0px;
filter: alpha(opacity=70); /* for IE */
opacity: 0.7; /* CSS3 standard */
background-color: #999;
z-index: 1;
}
.close_button {
font-family: Verdana, Geneva, sans-serif;
font-size: small; font-weight: bold;
float: right; color: #666;
display: block; text-decoration: none;
border: 2px solid #666;
padding: 0px 3px 0px 3px;
}
body { margin: 0px; }
-->
</style>
</head>
<body>
<a href="#" onclick="openpopup('popup1')">Open Popup Div #1</a>
<div id="popup1" class="popup">
Popup Div Tag #1 content goes here!
</div>
<a href="#" onclick="openpopup('popup2')">Open Popup Div #2</a>
<div id="popup2" class="popup">
Popup Div Tag #2 content goes here!
</div>
<div id="bg" class="popup_bg"></div>
</body>
</html>
