Why register for free on WebRadiance? |
 |
Welcome to WebRadiance forums! WebRadiance is a place for discussion and help on a large range of web design and development related topics such as HTML, CSS, ASP & .NET, PHP and SEO. It is provided for free, without ads and is a friendly place for beginners and professionals alike. By joining us today you can take part in our rapidly growing community. Registering enables you to:
|
Those popular alert boxes with faded backgrounds
How to make one
  |
 Those popular alert boxes with faded backgrounds, How to make one |
 Dec 19 2006, 11:47 AM
Post
#1
|
|
 W.R. General  Group: Administrators Posts: 2,833 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5  |
First, a demo: http://www.bostonwebstudio.com/code/alert-box.html {click the blue anchor link(s)}
I wrote a full fledged xhtml document that demonstrates an alert box that appears when an anchor is clicked. I presume you can attach the onclick event to any element, so you're not stuck using it on an anchor element. It's been tested in Firefox 1.5 & 2.0, IE6 & 7, and Safari. I'm very open to hearing from you all how this code can be improved upon, as I'm *not* a good javascript writer. You can either view source on that web page above, or use the below code. CODE <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Alert Box demonstration - Eat your vegetables!</title> <style type="text/css" media="screen"> body { /* These body styles are necessary for IE6 to utilize this effect */ height: 100%; width: 100%; margin: 0; } #background { /* These styles create only the background fade */ display: none; /* Hides the div from being displayed for now */ background-color: #000; /* Adjust the color of the fade here */ position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.50; /* Adjust level of opacity for safari, firefox, and other nice browsers */ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* Adjust level of opacity for IE6 and IE7 */ } #alertBox { /* These styles create the alert box itself */ display: none; /* Hides the div from being displayed for now */ height: 200px; width: 400px; padding: 1em; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -200px; border: 1px solid red; background-color: #ddd; } #alertImg img { /* This isn't necessary to make the effect work, it is only for the purposes of this demo */ float: left; margin-right: 10px; } </style> <!--[if lte IE 6]> <style type="text/css" media="screen"> #background { /* This bit of CSS exists for IE6, and makes the background fade layer behave as if it was position:fixed */ position: absolute; } </style> <![endif]--> </head> <body> <p><a href="#" onclick="document.getElementById('background').style.display='block'; document.getElementById('alertBox').style.display='block'">Click this to bring up the alert »</a></p> <div id="background"><!-- This empty div renders the background fade in the browser, do not delete it --></div> <!-- The below div will be hidden upon page-load, and contains all things inside the alert box --> <div id="alertBox"> <p>This content should be appearing within an alert box. Everything behind it should be faded out in all popular browsers.</p> <p id="alertImg"><img src="http://www.holisticvetpetcare.com/images-11-2004/kitty-gun-bb.jpg" alt="Kitty" height="120" /></p> <form action="#" method="post"> <p><input type="text" /> <select> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> </select> <input type="submit" /></p> </form> <p><a href="#" onclick="document.getElementById('background').style.display='none'; document.getElementById('alertBox').style.display='none'">Click this to hide the alert »</a></p> </div><!-- End of #alertBox --> <!-- The above div will be hidden upon page load, and contains all things inside the alert box --> <!-- ************************************************************ This begins the regular page content that will always be visible. ************************************************************* --> <h1>Alert box test</h1> <h2>Below this will be some common page elements seen on many sites.</h2> <p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google logo" /></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi libero. Donec at enim eu erat tincidunt ultricies. Donec semper lectus non mi. Nunc quis nisi a diam egestas tempus. Etiam rhoncus ullamcorper orci. Cras imperdiet dictum risus. Sed elementum diam et lorem. Sed pellentesque ligula a dolor. Nullam iaculis, risus eget volutpat accumsan, massa diam laoreet diam, eu ornare justo enim ut mi. Pellentesque convallis tellus non tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut elit felis, porttitor et, nonummy a, sodales sed, lectus.</p> <p>Praesent non pede. Ut accumsan eros non enim. Aliquam erat volutpat. Quisque libero. Morbi rhoncus pede vitae pede. Suspendisse eu velit. Curabitur vel ante. Nulla facilisi. In hac habitasse platea dictumst. Morbi sit amet leo id arcu fringilla tincidunt. Nulla facilisi. In hac habitasse platea dictumst. Pellentesque aliquam dapibus lectus. Vestibulum auctor dolor sit amet est. Nam mollis elementum pede. Maecenas commodo, lectus quis pharetra dignissim, lorem lectus vestibulum mauris, eu tristique nibh nunc ac lorem. Etiam a tellus vel metus placerat tincidunt.</p> <p>Nulla ac quam et sem tempor auctor. Duis a diam. Maecenas sit amet nibh. Ut quis dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam turpis. Cras consequat mi. Mauris suscipit, odio pharetra laoreet iaculis, eros augue venenatis libero, eu malesuada eros nisi et sem. Suspendisse id dolor. Ut non diam. Sed tortor diam, blandit vitae, mollis eu, ornare ut, erat. Sed sit amet odio ac purus ultricies egestas. Quisque mattis. Etiam neque. Curabitur tincidunt ligula eu magna. Donec semper, risus scelerisque tempus tempus, enim nulla dictum arcu, a porttitor lacus ligula a pede. Curabitur nibh sem, lacinia et, scelerisque et, volutpat a, magna.</p> <p><a href="#" onclick="document.getElementById('background').style.display='block'; document.getElementById('alertBox').style.display='block'">Click this to bring up the alert »</a></p> </body> </html> -------------------- |
 |
 
|
|
May 23 2007, 01:29 PM
Post
#2
|
|
|
W.R. General Group: Administrators Posts: 2,833 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
I just updated the demo link, and the code, above to reflect the following change:
Previously, when the alert box was activated, the semi-transparent div that appeared behind it wouldn't 'stay put' when you scrolled up or down; it would move up (or down) with the content and not cover 100% of the viewable area. Earlier today, I changed 'position: absolute;' to 'position: fixed;', for the good browsers, and introduced an IE6 only conditional comment that sent 'position: absolute;' back to IE6. As a result, it acts like position: fixed in IE6, even though it shouldn't. That browser is whacky. The only remaining quirk to this whole thing is that the semi-transparent div doesn't follow the window's viewport if the browser window is resized (by dragging the bottom-right corner, for example). So, it's better, but not yet perfect. -------------------- |
|
|
|
|
May 23 2007, 02:01 PM
Post
#3
|
|
 Codesmith Group: Administrators Posts: 991 Joined: 4-April 06 From: San Diego Member No.: 3 |
It looks good, but was this just an exercise/experiment in programming? There's half a dozen scripts out there that do the same thing...
Generally they attach the javascript to the elements through using the DOM, that way the script can be separated from the HTML. |
|
|
|
|
May 23 2007, 02:11 PM
Post
#4
|
|
 Loose bits sink chips Group: Administrators Posts: 2,101 Joined: 4-April 06 From: Kent, UK Member No.: 2 |
QUOTE(herkalees @ May 23 2007, 07:29 PM)  The only remaining quirk to this whole thing is that the semi-transparent div doesn't follow the window's viewport if the browser window is resized (by dragging the bottom-right corner, for example). Works fine here in Opera... -------------------- QUOTE(benbramz @ Aug 17 2007, 07:44 AM) Ive noticed that quite a few people are now adding quotes from the board into their signature. I think its started an new web-radiance craze.. :P |
|
|
|
|
May 23 2007, 02:26 PM
Post
#5
|
|
 W.R. Lieutenant  Group: Members Posts: 396 Joined: 14-April 07 Member No.: 420 |
Looks Good
 i just tested it in Firefox works ok. i gather you made your site fluid as when i resize the browser window, everything moves... -------------------- |
|
|
|
|
May 23 2007, 02:51 PM
Post
#6
|
|
|
W.R. General Group: Administrators Posts: 2,833 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
QUOTE(Catalyst @ May 23 2007, 03:01 PM) It looks good, but was this just an exercise/experiment in programming? There's half a dozen scripts out there that do the same thing... Generally they attach the javascript to the elements through using the DOM, that way the script can be separated from the HTML. Yep, just having a play  QUOTE(Man2u2uk @ May 23 2007, 03:26 PM) Looks Good i just tested it in Firefox works ok. i gather you made your site fluid as when i resize the browser window, everything moves... Yar, fluid she is. -------------------- |
|
|
|
|
Tags
No Tag inserted yet
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 2nd July 2009 - 07:34 PM |