View Full Version : Alert Box in CSS ... centered on screen

Jan 29th, 2007, 06:10 PM
What I'm doing is that when a form is submitted, if there are any errors or any instructions regarding a field, an alert box will pop up. Now this is very easy to do in Javascript but there you get a very ugly looking grey box.

However, if we do a nicer looking box in CSS, the box shows up at a fixed position. We want it to show up in the middle of the "visible screen area" ... like the javascript alert does.

I can't seem to find a way to have this pop up alert box appear in the middle of the screen that is visible. Any ideas?

Or is there a way to integrate CSS and Javascript to get the grey alert box to look much better.

All help is appreciated. Thanx!!!

Jan 29th, 2007, 06:24 PM
You can only center something in the center of the browser window, not on the users screen itself.
To center an element horizontally you would use margin: auto; (specifically margin-left and margin-right must be auto) and to center vertically look here: http://www.student.oulu.fi/~laurirai/www/css/middle/

I don't think there is a way to style the JavaScript popup because CSS can only style HTML and that is no HTML. Apart from that the popup is browser and operating system specific. In Opera it looks different than in IE and it's something completely different in Mac browsers because it emerges from the top of the browser window and stays attached to the top, not in the center.

Jan 29th, 2007, 07:35 PM
a way you can achieve this is through CSS and Javascript.

Use javascript to get the available height and width of the page, then divide that by 2 which will get you the exact centre point of the screen.

Once you got that its just a case of factoring in you DIV height and width to the formula.

Here's an example of a script I use on most of my administration scripts found on http://www.paramiliar.com

if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;

divwidth = 250;
divheight = 300;

var x = (myWidth / 2) - (divwidth / 2);
var y = (myHeight / 2) - (divheight / 2);

document.getElementById("alert_content_layer").style.left = parseInt(x)+'px';
document.getElementById("alert_content_layer").style.top = parseInt(y)+'px';

This code works in Internet Explorer and Firefox, I beleive it works in all browsers but I never tested it.

Jan 29th, 2007, 09:23 PM
VIPStephan .. Thanks! I'll check out the link.
neomaximus2k - Thanks! I'll ask the programmer to look into the code you have given. Does it center in the center of the screen that is currently visible or the whole page (eg with 5 scrolls)?

Jan 29th, 2007, 09:43 PM
Does it center in the center of the screen that is currently visible or the whole page (eg with 5 scrolls)?
In the center of the current browser window.

Feb 3rd, 2007, 06:19 PM
neomaximus2k: Thanks! Your technique worked. My programmer tweaked the code a bit and it works great in IE and Firefox. I will check it in Netscape as well though mostly Firefox and Netscape tend to behave similiarly. Opera, however, is a different story. But I'm sure with some tweaking, we will get that right, too.