How to create a Popup with CSS and Javascript

Published on Author Code Father

Depending on the situation you may want to load the popup content via an ajax call. It’s best to avoid this if possible as it may give the user a more significant delay before seeing the content. Here couple changes that you’ll want to make if you take this approach.

HTML:

<div id=”pop1″ class=”parentDisable”>
<table border=”1″ id=”popup”>
<tr><td>This is popup 1</td></tr>
<tr><td><a href=”#” onClick=”return hide(‘pop1’)”>Close</a></td></tr>
</table>
</div>

<CENTER>
<h3>Simple Popup Div + Background Disable Example</h3>
</br></br>
<a href=”#” onClick=”return pop(‘pop1’)”>Popup 1</a>
</br></br>

</CENTER>

Javascript:

<script type=”text/javascript”>
function pop(div)
{
document.getElementById(div).style.display=’block’;
return false
}
function hide(div)
{
document.getElementById(div).style.display=’none’;
return false
}
</script>

CSS:

<style>
.parentDisable
{
z-index:999;
width:100%;
height:100%;
display:none;
position:absolute;
top:0;
left:0;
background-color: #ccc;
color: #aaa;
opacity: .9;
filter: alpha(opacity=90);
}
#popup
{
width:300;
height:200;
position:absolute;
top:40%;
left:40%;
color: #000;
background-color: #fff;
}
</style>

Comments

comments