By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,433 Members | 776 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,433 IT Pros & Developers. It's quick & easy.

HOW: Center this popup message on screen.

P: n/a
The page below creates a popup message on the screen. It printed the
popup box 30 pixels from the left:

document.getElementById("dwindow").style.left="30p x"

How do I modify it so that the popup box is always centered on the
screen regardless of the monitor resolution of the users?

I do not know JS and I have been testing without success. Anybody can
help? Thanks.

================================================== ======
<html>

<head>

<script>

var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

function iecompattest(){
return (!window.opera && document.compatMode &&
document.compatMode!="BackCompat")? document.documentElement : document.body
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=temp x+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy +event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=temp x+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy +e.clientY-offsety+"px"
}
}

function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.di splay="none" //extra
tempx=parseInt(document.getElementById("dwindow"). style.left)
tempy=parseInt(document.getElementById("dwindow"). style.top)

dragapproved=true
document.getElementById("dwindow").onmousemove=dra g_drop
}

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scro llbars=1")
else{
document.getElementById("dwindow").style.display=' '
document.getElementById("dwindow").style.width=ini tialwidth=width+"px"
document.getElementById("dwindow").style.height=in itialheight=height+"px"
document.getElementById("dwindow").style.left="30p x"
document.getElementById("dwindow").style.top=ns6?
window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
document.getElementById("cframe").src=url
}
}

function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
document.getElementById("maxname").setAttribute("s rc","restore.gif")
document.getElementById("dwindow").style.width=ns6 ?
window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns 6?
window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("s rc","max.gif")
document.getElementById("dwindow").style.width=ini tialwidth
document.getElementById("dwindow").style.height=in itialheight
}
document.getElementById("dwindow").style.left=ns6?
window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
document.getElementById("dwindow").style.top=ns6?
window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}

function closeit(){
document.getElementById("dwindow").style.display=" none"
}

function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=nul l;
document.getElementById("dwindowcontent").style.di splay="" //extra
}

</script>
</head>
<body>

<div id="dwindow"
style="position:absolute;cursor:hand;left:0px;top: 0px;display:none"
onMousedown="initializedrag(event)" onMouseup="stopdrag()"
onSelectStart="return false">
<div align="right" style="background-color:gray"><img src="max.gif"
id="maxname" onClick="maximize()"><img src="close.gif"
onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">

<table width="100%" cellpadding="5" cellspacing="5"
style="border-collapse: collapse; border: 1px solid #000000"
bordercolor="#111111" id="AutoNumber1">

<tr>
<td>This is the popup message. This is the popup message.</td>
</tr>
</table>
</div>
</div>

<script>
//Use below code to load DHTML Window as page loads
if (ns6) window.onload=new Function('loadwindow("",350,150)')
else
loadwindow("",350,250)
</script>
</body>
</html>
Nov 9 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Blue® wrote:
The page below creates a popup message on the screen. It printed the
popup box 30 pixels from the left:

document.getElementById("dwindow").style.left="30p x"
All DOM features should be subject to previous tests at runtime.

<http://pointedears.de/scripts/test/whatami>
How do I modify it so that the popup box is always centered on the
screen regardless of the monitor resolution of the users?

I do not know JS [...]


Does not matter. It is a CSS question and thus belongs into the
respective newsgroup, comp.infosystems.www.authoring.stylesheets.

Come back here if you have problems implementing the CSS solution
through the DOM. Be sure to use Google Groups archives before you
post.

<http://jibbering.com/faq/>
PointedEars
Nov 9 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.