Thursday, July 17, 2008

Popup Style DIV using Javascript


Update at November 10, 2010:

I am appalled by the numbers of visits this link is getting. Go through it just to understand how its basically done. But I suggest you dont use this code at all :)

Instead, use Malsup's Wonderful jQuery BlockUI Plugin : Demos are here


This sample is to create a pop-up using a DIV in the same page as passing values to and from the pop-up is easier

The Demo Pics are

Before Click



After Click



The CSS.

.opaqueLayer
{
display:none;
position:absolute;
top:0px;
left:0px;
opacity:0.6;
filter:alpha(opacity=60);
background-color: #000000;
z-Index:1000;
}

.questionLayer
{
position:absolute;
top:0px;
left:0px;
width:350px;
height:200px;
display:none;
z-Index:1001;
border:2px solid black;
background-color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding:10px;
}

The Javascript.

function getBrowserHeight() {
var intH = 0;
var intW = 0;

if(typeof window.innerWidth == 'number' ) {
intH = window.innerHeight;
intW = window.innerWidth;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
intH = document.documentElement.clientHeight;
intW = document.documentElement.clientWidth;
}
else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
intH = document.body.clientHeight;
intW = document.body.clientWidth;
}
return { width: parseInt(intW), height: parseInt(intH) };
}

function setLayerPosition() {
var shadow = document.getElementById('shadow');
var question = document.getElementById('question');

var bws = getBrowserHeight();
shadow.style.width = bws.width + 'px';
shadow.style.height = bws.height + 'px';
question.style.left = parseInt((bws.width - 350) / 2)+ 'px';
question.style.top = parseInt((bws.height - 200) / 2)+ 'px';
shadow = null;
question = null;
}

function showLayer() {
setLayerPosition();

var shadow = document.getElementById('shadow');
var question = document.getElementById('question');

shadow.style.display = 'block';
question.style.display = 'block';

shadow = null;
question = null;
}

function hideLayer() {
var shadow = document.getElementById('shadow');
var question = document.getElementById('question');

shadow.style.display = 'none';
question.style.display = 'none';

shadow = null;
question = null;
}

window.onresize = setLayerPosition;


And now, the HTML itself



<div id="shadow" class="opaqueLayer"> </div>
<div id="question" class="questionLayer">
<br />
<br />
<br />
This is the Popup DIV
<br />
Put anything here, Textbox or Buttons 
<br />
<br />
<br />
<input type="button" onclick="hideLayer();" value="Close" />
</div>
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td style="height:120px;">

</td>
</tr>
<tr>
<td>
<button onclick="showLayer();">Click Me to see the Popup DIV</button>
</td>
</tr>
</table>




Explanation

Here two other DIVS are placed in the page which are hidden at first.
When clicking on the Button they are rendered visible.
These two DIVs are having different Z-Indexes that makes them look like a Popup Window.

Happy Coding!

Related Posts :



8 comments on "Popup Style DIV using Javascript"

Add your comment. Please don't spam!
Subscribe in a Reader
Kris B on September 29, 2009 at 12:16 PM said...

I just wanted to let you know, that for some of the parts there is an easier and less resourcefull way to do it:

Adding these:

.opaqueLayer
{ width:100%; height:100%;
}

And removing these:

shadow.style.width = bws.width + 'px'; shadow.style.height = bws.height + 'px';

Will result in a much smoother resizing of the window, and will decrease the drag on the local browser by removing some of the javascript.

The other point is, that the padding effectively is part of the equation in centering the popup, so you will have to add that to the centering of the popup:
var n = 44;
question.style.left = parseInt((bws.width - 175 - n) / 2)+ 'px';
question.style.top = parseInt((bws.height - 100 - n) / 2)+ 'px';

n is equal to 2xpadding + 2xborder:
border:2px solid black; padding:20px;

Naveen on December 30, 2010 at 6:03 PM said...

@kris: Thanks for the info. I will change when I get time

Justin on January 14, 2011 at 9:49 PM said...
This comment has been removed by the author.
Justin on January 14, 2011 at 9:59 PM said...

Nevermind. I figured it out.

hgibson on February 18, 2011 at 6:26 PM said...

I have an asp:UpdatePanel which might change size as people interact with it. BlockUI didn't work for what I wanted - having the panel stay in the flow of the page, and block everything around it. Your post gave me what I needed for that.

In addition to Kris B's comment about width/height, changing position to fixed means that the opaque layer stays in place when scrolling the page.

Justin on March 10, 2011 at 12:11 AM said...

is there a way to make the pop-up show when the page is loaded rather than having to click the button?

Naveen on May 26, 2011 at 9:10 AM said...

@justin: please use BlockUI by Mike Alsup. much much better.

RAHUL KUMAR on March 6, 2013 at 5:18 PM said...

thanks for this useful script

Post a Comment