PDA

View Full Version : Alert Box with CSS

cancer10
08-14-2008, 01:17 PM
Hey,

I am sure you must have seen that Javascript alert window on some or other site that floats in the middle of your screen.

Can you please tell me how do I make such a notification box with CSS, that would float at the middle of my screen.


Screenshot:
http://img139.imageshack.us/img139/9721/sssssssssssf0.th.jpg (http://img139.imageshack.us/my.php?image=sssssssssssf0.jpg)

Thanx
brazenskies
08-14-2008, 01:21 PM
I imagine you would need some kind of javascript to change the visibility of a div.
cancer10
08-14-2008, 01:23 PM
Ok but How do I make it float in middle of the screen?


Thanx
brazenskies
08-14-2008, 01:29 PM
I'm not great with css, so other people will be able to help you more than I can, but id...


#alertoff {
margin-right:auto;
margin-left:auto;
width:300px;
height:125px;
visibility:hidden;
z-index:1000000;
}
#alerton {
margin-right:auto;
margin-left:auto;
width:300px;
height:125px;
z-index:1000000;
}


and pop that at the top of my page, then use come javascript to change the id.

not tested, so not sure if that will work though.
BoldUlysses
08-14-2008, 01:31 PM
Here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>

<style type="text/css">

* {
padding:0px;
margin:0px;
}

html, body {
height:100%;
width:100%;
text-align:center;
}

#centered {
position:absolute;
height:150px;
width:250px;
top:50%;
left:50%;
margin-top:-75px;
margin-left:-125px;
border:1px solid #000;
}

</style>

</head>

<body>

<div id="centered">

Alert text/image here.

</div>

</body>
</html>


Control visibility with display:none and display:block.

Adjust pixel values to suit.

Edit: On second thought, an alert message is probably something you'll want to control using JS, given that it's usually displayed in response to definite input. But the code above will center it using CSS.
Apostropartheid
08-14-2008, 05:42 PM
I'm quite sure that what you need is the JavaScript window.alert() method. [developer.mozilla.org (http://developer.mozilla.org/en/docs/DOM:window.alert)]
brazenskies
08-14-2008, 06:19 PM
they want to do it in CSS, not the standard javascript alert
_Aerospace_Eng_
08-14-2008, 06:42 PM
You don't need to use window.alert().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#alert {
position:absolute;
height:150px;
width:250px;
top:50%;
left:50%;
margin-top:-75px;
margin-left:-125px;
border:1px solid #000;
text-align:center;
display:none;
}
</style>
<script type="text/javascript">
function showAlert()
{
document.getElementById('alert').style.display = 'block'
}
window.onload = function()
{
showAlert();
}
</script>
</head>
<body>
<div id="alert"> Alert text/image here.<br /><input type="button" value="OK" onclick="document.getElementById('alert').style.display = 'none'" /></div>
<a href="#" onclick="showAlert()">Show Alert</a>
</body>
</html>
macwiz
08-14-2008, 06:52 PM
Take a look at Facebook. You get a popup for tons of stuff, and not one JS alert. It can very easily be done.
cancer10
08-16-2008, 03:38 AM
Question:

What is z-index used for?

also, your script shall not work if my page has a loooooong vertical scroll.

Thanx
macwiz
08-16-2008, 04:11 AM
Question:

What is z-index used for?

also, your script shall not work if my page has a loooooong vertical scroll.

Thanx

The Z-Index is used to set layers on elements. Just like Photoshop uses layers to design and edit images, Z-Indexes are the same concept.
cancer10
08-16-2008, 04:15 AM
so why the value is set to 1000000?
nmimagine
05-14-2012, 05:40 PM
just overwrite the window.alert function......

like this :

window.alert = function() {
//your rule
}

to make your dialog, you can add some HTML element with DOM, and the styles defined with CSS. Add some effects will be good.

I have tested it. It's easy and exiting. Use your imagination and creativity.......