Friday, January 23, 2009

JavaScript : Pop-up Div with Background disabled

This HTML codes shows a simple pop-up Div, with background disabled. It can also customize according to user needs. It can also be used as simple pop-up window with background disabled.



<HTML>
<HEAD>
<TITLE>PopUp Div + Background Disable</TITLE>
<style>
.parentDisable
{
z-index:999;
width:100%;
height:100%;
display:none;
position:absolute;
top:0;
left:0;
background-color: #ccc;
color: #aaa;
opacity: .4;
filter: alpha(opacity=50);
}
#popup
{
width:300;
height:200;
position:absolute;
top:200px;
left:300px;
color: #000;
background-color: #fff;
}
</style>
<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>
</HEAD>
<BODY>
<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>
<div id="pop2" class="parentDisable">
<table border="1" id="popup">
<tr><td>This is popup 2</td></tr>
<tr><td><a href="#" onClick="return hide('pop2')">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>
<a href="#" onClick="return pop('pop2')">Popup 2</a>

</CENTER>
</BODY>
</HTML>

7 comments:

  1. how I can close popups with click on anywhere of page, not exact at close?

    thank you

    ReplyDelete
  2. Thanx Bro...I am searching for the same for such a long period of time.

    ReplyDelete
  3. thanks..nice one..

    but the pop up menu color should remain white

    ReplyDelete
  4. Seriously a simple way to do it and it works very well!! I just changed the opacity to 0.8 and the color to black and I got exactly the effect that I wanted,

    Just a suggestion to people who might want to use this on longer change the code to the following this will disable the scroll bars at the bottom of the page:

    function pop(div)
    {
    document.body.style.overflow = 'hidden';
    document.getElementById(div).style.display='block';
    return false
    }
    function hide(div)
    {
    document.body.style.overflow = 'auto';
    document.getElementById(div).style.display='none';
    return false
    }

    ReplyDelete