Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dim the background 1

Status
Not open for further replies.
DotNetGnat

DotNetGnat

Programmer
Mar 10, 2005
5,548
IN
Hi guys,

can anyone tell me how to dim the background so that the alert is more visible...

i mean if i have something like this:

<html>
<body>
//some content here
<script language="javascript">
alert("success");
</script>
</body>
</html>


so when the alert window show up i want to dim the color of the background contents...

-DNG
 
Sort by date Sort by votes
What is the color of your body background?

Javascript alert boxes are typical grey color boxes. I have not heard of changing the color of these alert message box through CSS.

 
Upvote 0 Downvote
oops...i guess i did not make my question clear...all I wanted is to make the background page kinda faded behind the alert message box...so that the alert box which is on the top of the page appears clearly...

-DNG
 
Upvote 0 Downvote
This was actually kinda fun to do, and I might end up using it in one of my own applications:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function resizeFadeDiv() {
   var fadeDiv = document.getElementById("fadeDiv");
   //check dimensions of window
   var w = 0;
   var h = 0;
   //ff
   if (window.innerWidth) {
      w = window.innerWidth;
      h = window.innerHeight;
   }
   //ie6
   else if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
      w = document.documentElement.clientWidth;
      h = document.documentElement.clientHeight;
   }
   //ie6 quirks
   else if (document.body && document.body.clientWidth && document.body.clientHeight) {
      w = document.body.clientWidth;
      h = document.body.clientHeight;
   }
   else {
      w = 0;
      h = 0;
   }
   //now check dimensions of document to see which is larger
   var w2 = 0;
   var h2 = 0;
   //ie6
   if (document.documentElement && document.documentElement.scrollWidth && document.documentElement.scrollHeight) {
      w2 = document.documentElement.scrollWidth;
      h2 = document.documentElement.scrollHeight;
   }
   //ie6 quirks
   else if (document.body && document.body.scrollWidth && document.body.scrollHeight) {
      w2 = document.body.scrollWidth;
      h2 = document.body.scrollHeight;
   }
   //ff
   else if (document.body && document.body.clientWidth && document.body.clientHeight) {
      w2 = document.body.clientWidth;
      h2 = document.body.clientHeight;
   } 
   else {
      w2 = 0;
      h2 = 0;
   }
   fadeDiv.style.height = ((h > h2) ? h : h2) + "px";
   fadeDiv.style.width = ((w > w2) ? w : w2) + "px";
}

function blah() {
   var fadeDiv = document.getElementById("fadeDiv");
   fadeDiv.style.display = "block";
   alert("this is a test");
   fadeDiv.style.display = "none";
}

window.onload = resizeFadeDiv;
window.onresize = resizeFadeDiv;


</script>

<style type="text/css">

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

p {
   margin-bottom:20px;
}

div#fadeDiv {
   position:absolute;
   background-color:#777777;
   display:none;
   top:0px;
   left:0px;
   height:0px;
   width:0px;
   opacity: 0.5;
   -moz-opacity: 0.5;
   -khtml-opacity: 0.5;
   filter: alpha(opacity=50);
}
</style>
</head>
<body>
<div id="fadeDiv"></div>
<input type="button" value="show alert" onclick="blah()" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vehicula, arcu a dapibus eleifend, mi mauris bibendum turpis, et placerat elit justo id purus. Nam quis nisi. Fusce sit amet purus a dolor varius elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec gravida scelerisque massa. Vestibulum varius est eu elit. Praesent eget massa ac ipsum euismod sagittis. Suspendisse egestas accumsan lacus. Sed ut ligula. Vestibulum ac dui nec quam ultrices commodo. Nam sodales augue eget quam. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nulla nunc, ullamcorper nec, mollis eget, vehicula volutpat, est. Aenean id metus. Vivamus eget nulla. Duis ac felis et augue tempor nonummy. Nulla non odio non nulla auctor dignissim. Etiam vehicula, purus a blandit euismod, dolor ipsum bibendum diam, et rhoncus lorem metus nec sem.</p>
<p>Aenean quis velit. Fusce rhoncus felis. Aenean mattis consectetuer tellus. Mauris a nulla a dolor sollicitudin molestie. Ut enim mi, sagittis vel, hendrerit a, fermentum ut, turpis. Curabitur non diam. Etiam ullamcorper elementum elit. Nulla sed nunc. Proin purus lacus, viverra ac, molestie non, varius ut, enim. Nam consequat mi dapibus dui. Mauris purus orci, tristique luctus, sodales sit amet, venenatis et, ante. Etiam eget velit at pede condimentum scelerisque. Integer condimentum eleifend ipsum. Cras ut odio. Aliquam erat volutpat. Integer interdum tempus nunc. In nonummy, tortor et sollicitudin ullamcorper, massa risus ornare lectus, et venenatis est leo vel lectus. Nam suscipit purus in ante.</p>
<p>Quisque dictum pretium enim. Maecenas velit turpis, tristique vitae, tincidunt at, venenatis et, justo. Curabitur sollicitudin ullamcorper tortor. Nam vitae nulla eu lacus facilisis pellentesque. Maecenas nunc tellus, commodo id, vulputate interdum, eleifend et, lorem. Nunc nec nunc. Curabitur vitae lacus. Nam luctus justo in justo. Duis eu elit ac sapien suscipit scelerisque. Fusce id leo.</p>
<p>Curabitur ornare purus sit amet urna. Integer tortor. Sed justo nunc, porta a, congue sit amet, euismod non, lacus. Sed massa mauris, aliquet id, accumsan vel, hendrerit sit amet, purus. Nullam ipsum ipsum, hendrerit quis, facilisis ac, tincidunt a, nunc. Ut molestie ante in purus. Fusce ac velit. Quisque eget massa quis arcu facilisis facilisis. Vivamus dignissim, libero ut cursus facilisis, diam lectus malesuada nunc, in malesuada pede est vel ipsum. Praesent enim. Donec congue. In urna. Nunc adipiscing leo eget ipsum. Fusce id urna. Quisque consequat nulla id orci. Donec arcu velit, ultrices nec, imperdiet et, vulputate eget, ante. Vivamus ac sem. Nulla nec ante. Mauris interdum. Vestibulum leo.</p>
<p>Cras lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam pede pede, commodo in, porta ut, faucibus facilisis, pede. Morbi neque nisl, placerat elementum, volutpat vitae, vestibulum vel, ligula. Duis sollicitudin pellentesque quam. Ut quam justo, porttitor non, lobortis nec, tincidunt ac, enim. Donec venenatis ultricies nulla. Quisque dictum tortor eget diam. Integer faucibus dignissim elit. Aliquam iaculis quam et libero. Proin erat erat, suscipit ac, ultrices sit amet, posuere non, erat. Aliquam erat volutpat. Duis eros. Mauris sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer commodo dolor non neque. Ut consectetuer porta nisl. Fusce ultrices pellentesque felis. Nunc nibh. Suspendisse arcu odio, convallis ut, laoreet nec, vulputate venenatis, mi.</p>
<p>Vivamus ut velit. Aliquam euismod odio sed nunc. Sed consequat lobortis ligula. Nunc quis neque. Etiam suscipit quam eget neque. Quisque sagittis. Quisque nec risus sit amet justo aliquam rhoncus. Cras ullamcorper. Donec malesuada. Nullam eu felis auctor nulla aliquet convallis. Vestibulum imperdiet nulla a dolor. Fusce neque eros, consectetuer in, tempor ut, dapibus eu, ante.</p>
<p>In vitae lectus. Mauris viverra malesuada tortor. Proin imperdiet, massa eu laoreet tempor, quam risus convallis est, et lobortis elit magna quis ligula. Aenean aliquam augue in ligula. Quisque consectetuer tellus vitae elit. In lectus. Phasellus felis. Donec feugiat. Curabitur aliquet augue ac pede. Proin magna neque, iaculis sed, pulvinar vel, facilisis condimentum, arcu. Aliquam posuere nunc id nisl. Duis fringilla nunc eget eros.</p>
<p>Suspendisse magna. Mauris tristique orci ut elit. Pellentesque tellus massa, pulvinar id, imperdiet eu, placerat vel, turpis. Vestibulum iaculis, dui at eleifend euismod, est lacus tincidunt pede, a condimentum leo nunc id lacus. Praesent sit amet libero mollis diam facilisis varius. Integer pede dolor, commodo eu, volutpat at, imperdiet vitae, nibh. Aliquam nisi diam, vulputate vitae, elementum in, varius eget, massa. Duis sit amet orci. Maecenas fringilla leo quis nisi. Duis libero. Quisque euismod dignissim sem. Nulla scelerisque, enim non fringilla vestibulum, erat elit sollicitudin arcu, id ullamcorper ante libero sed velit. Curabitur porta, lectus at pellentesque convallis, diam mauris ornare mauris, eleifend porta dolor dui id metus. Curabitur et ipsum in nunc volutpat ornare.</p>
<p>Morbi quis est non mauris pretium tincidunt. Cras aliquet elementum lacus. Nulla at augue eget justo luctus iaculis. Etiam justo lectus, ullamcorper non, tincidunt a, molestie vitae, velit. Nulla blandit varius augue. Aliquam quis massa. Quisque a purus in nisl dictum suscipit. Etiam tellus metus, iaculis ac, tincidunt et, vulputate ac, mauris. Vivamus id dui. Curabitur ut nisl ut nunc interdum adipiscing. Vestibulum consequat. Pellentesque cursus arcu. Pellentesque condimentum. Nulla eget nisi congue lectus aliquam vulputate. In lorem. Ut eget nibh eget tellus convallis consectetuer. Ut vitae dui.</p>
<p>Morbi sed elit. In porta mi a pede. Duis viverra urna ut mi. Curabitur libero. Ut purus nulla, mollis nec, volutpat et, convallis a, erat. Donec sit amet purus non eros euismod volutpat. Nullam ipsum. Suspendisse viverra. Cras non nulla. Suspendisse potenti. Sed ac pede ut dolor tincidunt consequat. Etiam nec sem. Integer et ipsum. Pellentesque scelerisque eleifend augue. Aenean ac diam. Donec commodo, nisl sit amet lacinia facilisis, massa neque posuere orci, quis aliquet arcu sapien porta tellus. Fusce est odio, luctus interdum, commodo vehicula, auctor ac, orci. Nunc rutrum erat vitae odio. Quisque varius imperdiet sapien.</p>
<input type="button" value="show alert" onclick="blah()" />
</body>
</html>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
thanks kaht,

looks promising...have a star...

-DNG
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
707
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
658
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
597
coldbohemia
coldbohemia
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
207
gmmastros
gmmastros
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
180
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top