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!
8 comments on "Popup Style DIV using Javascript"
Subscribe in a Reader
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;
@kris: Thanks for the info. I will change when I get time
Nevermind. I figured it out.
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.
is there a way to make the pop-up show when the page is loaded rather than having to click the button?
@justin: please use BlockUI by Mike Alsup. much much better.
thanks for this useful script
Post a Comment