In this article, I am explaining how to create a Modal Popup using JavaScript. In one of my previous articles I explained How to open a PopUp Window. You can refer the article here.
Concept
The concept is to open a PopUp and then freeze the parent window and when the popup is closed the parent window is changed back to normal.
Parent Page
To start with here is the script that will open a PopUp Window.
<script type = "text/javascript">
var popUpObj;
function showModalPopUp()
{
popUpObj=window.open("PopUp.aspx",
"ModalPopUp",
"toolbar=no," +
"scrollbars=no," +
"location=no," +
"statusbar=no," +
"menubar=no," +
"resizable=0," +
"width=100," +
"height=100," +
"left = 490," +
"top=300"
);
popUpObj.focus();
LoadModalDiv();
}
</script>
You will notice above that I am calling a function LoadModalDiv() which is given below. The job of this function is to freeze the screen using a DIV.
<script type = "text/javascript">
function LoadModalDiv()
{
var bcgDiv = document.getElementById("divBackground");
bcgDiv.style.display="block";
if (bcgDiv != null)
{
if (document.body.clientHeight > document.body.scrollHeight)
{
bcgDiv.style.height = document.body.clientHeight + "px";
}
else
{
bcgDiv.style.height = document.body.scrollHeight + "px" ;
}
bcgDiv.style.width = "100%";
}
}
</script>
And finally the third function that will unfreeze the parent page by hiding the Modal DIV. This function will be called from the PopUp page in the page unload event which will trigger when the PopUp page is closed.
<script type = "text/javascript">
function HideModalDiv()
{
var bcgDiv = document.getElementById("divBackground");
bcgDiv.style.display="none";
}
</script>
For freezing the screen I am using a Transparent DIV whose Z-index is set to value greater than zero so that it overlaps the parent page.
<div id = "divBackground" style=" position:absolute; top:0px; left:0px;background-color:black; z-index:100;opacity: 0.8;filter:alpha(opacity=60); -moz-opacity: 0.8; overflow:hidden; display:none">
</div>
PopUp (Child) Page
In the PopUp Page I have written a small script that runs when the PopUp page is closed.
<script type = "text/javascript">
function OnClose()
{
if(window.opener != null && !window.opener.closed)
{
window.opener.HideModalDiv();
}
}
window.onunload = OnClose;
</script>
As you will notice above I am calling the HideModalDiv() function of the parent page when the window unload event is triggered. This will unfreeze the screen as soon as PopUp is closed.
Figure below displays the Demo Modal PopUp Window.
You can try out a Demo by clicking this button.
The above script is tested in the following browsers.
1. Internet Explorer 7
2. Firefox 3
3. Google Chrome
4. Safari
4.
This completes the article. You can download the sample source from the link below.
ModalPopUp.zip (3.23 kb)