Centering a popup div using css
Before, I was centering a div using javascript and it sucks and gives a lot of hassle then I found this script(about four months ago) which takes away all my headaches. Makes life 0.00000001% easier....hehe<!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>coffee and paste - popup div center</title>
<style>
html, body {
height:100%;
}
#blackout {
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: .8;
opacity: .8;
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: 1px solid #000;
background-color: #FFF;
color: #333;
padding: 0;
height: 150px;
width: 300px;
z-index: 10;
font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#divpop_head{
position:absolute;
top:0;
left:0;
width:100%;
background-color: #999999;
text-align:center;
padding:2px 0;
z-index:-1;
}
#close_pop{
float:right;
text-align:right;
cursor:pointer;
padding-right:10px;
}
#close_pop a{
text-decoration:none;
color: #333;
}
#close_pop a:hover{
color:#FF0000;
}
#pop_content{
clear:both;
padding: 10px;
}
</style>
<!--[if IE]>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
#blackout {
position: absolute;
}
#divpopup {
position: absolute;
}
</style>
<![endif]-->
<script language="javascript" type="text/javascript">
function popup(sw) {
if (sw == 1) {
// Show popup
document.getElementById('blackout').style.visibility = 'visible';
document.getElementById('divpopup').style.visibility = 'visible';
document.getElementById('blackout').style.display = 'block';
document.getElementById('divpopup').style.display = 'block';
} else {
// Hide popup
document.getElementById('blackout').style.visibility = 'hidden';
document.getElementById('divpopup').style.visibility = 'hidden';
document.getElementById('blackout').style.display = 'none';
document.getElementById('divpopup').style.display = 'none';
}
}
</script>
</head>
<body>
<div id='blackout'> </div>
<div id='divpopup'>
<div id='divpop_head'>Coffee and Paste</div>
<div id='close_pop'onclick='popup(0)'><a href='#'>[close]</a></div>
<div id='pop_content'>
Thanks for visiting my blog....<br />
<a href='http://coffeeandpaste.blogspot.com/'>visit it again here </a><br />
<a href='http://monkeetech.blogspot.com/'>or my other blog here </a><br />
</div>
</div>
<a href='javascript:popup(1);'>Click here to test popup</a>
</body>
</html>
copy and paste the code above and paste it to your text editor and save it as html.
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>coffee and paste - popup div center</title>
<style>
html, body {
height:100%;
}
#blackout {
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: .8;
opacity: .8;
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: 1px solid #000;
background-color: #FFF;
color: #333;
padding: 0;
height: 150px;
width: 300px;
z-index: 10;
font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#divpop_head{
position:absolute;
top:0;
left:0;
width:100%;
background-color: #999999;
text-align:center;
padding:2px 0;
z-index:-1;
}
#close_pop{
float:right;
text-align:right;
cursor:pointer;
padding-right:10px;
}
#close_pop a{
text-decoration:none;
color: #333;
}
#close_pop a:hover{
color:#FF0000;
}
#pop_content{
clear:both;
padding: 10px;
}
</style>
<!--[if IE]>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
#blackout {
position: absolute;
}
#divpopup {
position: absolute;
}
</style>
<![endif]-->
<script language="javascript" type="text/javascript">
function popup(sw) {
if (sw == 1) {
// Show popup
document.getElementById('blackout').style.visibility = 'visible';
document.getElementById('divpopup').style.visibility = 'visible';
document.getElementById('blackout').style.display = 'block';
document.getElementById('divpopup').style.display = 'block';
} else {
// Hide popup
document.getElementById('blackout').style.visibility = 'hidden';
document.getElementById('divpopup').style.visibility = 'hidden';
document.getElementById('blackout').style.display = 'none';
document.getElementById('divpopup').style.display = 'none';
}
}
</script>
</head>
<body>
<div id='blackout'> </div>
<div id='divpopup'>
<div id='divpop_head'>Coffee and Paste</div>
<div id='close_pop'onclick='popup(0)'><a href='#'>[close]</a></div>
<div id='pop_content'>
Thanks for visiting my blog....<br />
<a href='http://coffeeandpaste.blogspot.com/'>visit it again here </a><br />
<a href='http://monkeetech.blogspot.com/'>or my other blog here </a><br />
</div>
</div>
<a href='javascript:popup(1);'>Click here to test popup</a>
</body>
</html>
copy and paste the code above and paste it to your text editor and save it as html.
0 comments:
Post a Comment