Centering a popup div using css

Posted by Prince | 8:49:00 PM | | 0 comments »

    

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>
Online Demo:




Popup using css

Click for online demo




0 comments

Related Posts Plugin for WordPress, Blogger...