Centering a popup div using css
In one of my project I'm struggling to align a pop up division to center of screen using java script.I tried using screen.width and screen.height to get center. But no use.
And finally I got the following solution while surfing the web and I'm relaxed.
Code:
<!DOCTYPE HTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><head>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<title>popup using css</title>
<style>
#divBackground{
visibility:hidden;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
display:none;
background-color:#000;
filter:alpha(opacity=60);
-moz-opacity:.6;
opacity:.6;
z-index:9;
}
#divPopup{
position:fixed;
top:50%;
left:50%;
margin-top:-81px;/* half of the height plus a little to the top */
margin-left:-150px;/* half of the width */
visibility:hidden;
display:none;
border:1pxsolid#000;
background-color:#FFF;
color:#333;
padding:0;
height:300px;
width:350px;
z-index:10;
font-size:12px;
}
#divPopupHead{
position:absolute;
top:0;
left:0;
width:100%;
background-color:#2B60DE;
color:#fff;
font-weight:bold;
padding:2px0;
z-index:-1;
}
#divClosePopup{
float:right;
text-align:right;
cursor:pointer;
padding-right:10px;
}
#divClosePopupa{
text-decoration:none;
color:#333;
}
#divClosePopupa:hover{
color:#FF0000;
}
#divPopupContent{
clear:both;
padding:10px;
}
</style>
<!--[ifIE]>
<styletype="text/css"> *{
padding:0;
margin:0;
}
html,body{
height:100%;
overflow:auto;
}
#divBackground{
position:absolute;
}
#divPopup{
position:absolute;
}
</style>
<![endif]-->
<scriptlanguage="javascript"type="text/javascript">
functionshowPopup(){
//Showpopup
document.getElementById('divBackground').style.visibility='visible';
document.getElementById('divPopup').style.visibility='visible';
document.getElementById('divBackground').style.display='block';
document.getElementById('divPopup').style.display='block';
}
functionhidePopup() {
//Hidepopup
document.getElementById('divBackground').style.visibility='hidden';
document.getElementById('divPopup').style.visibility='hidden';
document.getElementById('divBackground').style.display='none';
document.getElementById('divPopup').style.display='none';
}
</script>
</head>
<body>
<div id='divBackground'></div>
<div id='divPopup'>
<div id='divPopupHead'>Popupusingcss</div>
<div id='divClosePopup'onclick='hidePopup()'><ahref='#'>X</a></div>
<div id='divPopupContent'>
Welcome to .NetCluster
</div>
<a href='javascript:showPopup();'>Click for online demo</a>
</body>
</html>
Click for online demo
0 comments
Post a Comment