 |
 |
« Designing Simple Multiple Scrollable Image Gallery | Successful Business Video Depends On 5 P’s »
| Tweet |
|
|
|
If you stay in this page for some time and watch the following paragraph (within the dotted lines) you’ll find that the portion inside the dotted boundary turns opaque with a reddish background color, and at the same time a dialog box opens up in the middle.
[Note: The above is done with iframe tag. To see how this works in an entire page, click here.]
The dialog box has some simple HTML texts. If you wish you can hit the close button and the dialog box closes.
When using this technique many websites do not provide the close button thereby rather forcibly making the visitors to linger with the dialog box. This is so because except one, there is no other way to close the dialog box.
And that one way is to hit the Esc button on the keyboard which many viewers may not be able to guess if not specifically told.
If however you change the statement ‘closeOnClick: false’ to ‘closeOnClick: true’ (see the HTML code below), the dialog box can be closed by clicking anywhere on the page.
Whether or not the close option is provided, this delayed opening of an overlay dialog box is very popular among webmasters. The reasons are not far to seek.
Unlike the disturbing popup or the benign pop-under that can be easily dismissed or prevented, an overlay dialog box unfailingly arrests the attention of a viewer and is thus more successful for the purpose it is used.
The other reason is of course the sophistication of the technique, and one that catches eye no matter how indifferent or distracted a viewer is while surfing a webpage.
What is great about the whole thing is that the jQuery script used to design this overlay dialog box is available absolutely free. In this example the dialog box opens immediately upon loading of the webpage.
We have incorporated a delay event in the script (appearing toward the end of the HTML code, highlighted in blue color) that makes the overlay dialog box appear after a time gap. You can change this time to whatever you want.
You can also change the opacity, color, and speed of the overlay on which the dialog box appears. Feel free to copy the HTML code for your use.
If you are interested in more overlay designs, do look at the following video articles:
- How To Create Overlay Lightbox With jQuery Fancy-Zoom
- How To Create An Overlay Lightbox In Your Webpage
HTML Code
The HTML is easy and simple to use. The code below is complete and can be used for your needs. The script that calls the overlay to action is given just before the closing </body> tag. The main parameters in that code is highlighted for easy understanding. Feel free to copy the code for your use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>jQuery Overlay Dialog Box With Delayed Opening Taken From FlowPlayer.Org</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<style>
#facebox {
/* overlay is hidden before loading */
display:none;
/* standard decorations */
width:450px;
border:20px solid #666;
/* for modern browsers use semi-transparent color on the border. nice! */
border:10px solid rgba(82, 82, 82, 0.698);
/* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#facebox div {
padding:10px;
border:1px solid #3B5998;
background-color:#FFF;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}
#facebox h2 {
margin:-11px;
margin-bottom:0px;
color:#FFF;
background-color:#6D84B4;
padding:5px 10px;
border:1px solid #3B5998;
font-size:20px;
text-align:center;
}
</style>
</head>
<body>
<!--[if IE]>
<style type="text/css">
.facebox {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333);
zoom: 1;
}
</style>
<![endif]-->
<center><div style="font-family: lucida grande,tahoma,verdana,arial,sans-serif;width:540px;">
<h1>Example of Overlay Dialog Box</h1>
<p align=justify>This is an example of jQuery overlay dialog box with delayed opening. The delay is set at 5 seconds which can be altered easily. The dialog box opens atop a red overlay background, all of which can be changed in the code that appears at the bottom. You can also set the dialog box to open or not to open by clicking anywhere on the webpage.</p>
<p align=justify>To see the overlay effect again, simply refresh this page.</p>
</div></center>
<!-- facebook dialog -->
<div id="facebox">
<div>
<h2>Example of OverLay Dialog Box</h2>
<p>This dialog box opens automatically when the page loads. There is no need for a trigger element.</p>
<form><input type="file" /></form>
<p style="color:#258">To close, click the Close button or hit the ESC key. <button class="close"> Close </button></p>
</div>
</div>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {
// select the overlay element - and "make it an overlay"
$("#facebox").overlay({
// custom top position
top: 10,
// some mask tweaks suitable for facebox-looking dialogs
mask: {
// you might also consider a "transparent" color for the mask
color: '#A00',
// load mask a little faster
loadSpeed: 1000,
// very transparent
opacity: 0.5
},
// disable this for modal dialog-type of overlays
closeOnClick: false,
// we want to use the programming API
api: true
// load it after delay
})
var ol = $("#facebox").overlay({api: true});
// wait 5 seconds, then load the overlay
setTimeout(function() {
ol.load();
}, 5000);
});
</script>
</body>
</html>| Tweet |
|
|
|
This article of January 21st, 2010 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
14 Comments
Trackbacks/Pingbacks
- Create Overlay Lightbox For Your Website Free With jQuery « Developpement Informatique - [...] Free jQuery For Overlay Dialog Box With Delayed Opening, Free HTML [...]
Thanks so much, this works great! However, I’m trying to implement a delayed close. After it opens, I would like the overlay to stay open for 10 seconds and then close. I have limited javascript knowledge. What code would I need to add?
Thanks!
Hi Mike,
Sorry for replying late! As to your query, the jQuery delayed opening shown here will close only at the intervention of the user. This script to my understanding may not facilitate auto-close. I’ll let you know if I find out other way to do as you want. Thanks for your good words
Wow it helps! Thanks a lot!
Beautiful and exactly what I’m trying to implement. Is there any way to only make this appear one time for a visitor.. and keep the form from appearing every time the same visitor comes to your site.. I’m just thinking of the folks that have already signed up. I’d hate to keep showing the message to them.
Thank you!
@Amy,
Thanks for your complements.
I’m not aware of making the overlay appear once for a visitor. Even if that is possible – and I guess it is – I feel that may not be the ideal way out. Usually, a visitor may not sign up on first visit. Not having an overlay may not be compelling enough to have her sign up if she comes visiting a second time.
In your case, maybe an iframe overlay at one side of the webpage (as in the example above) is preferable.
Partha
Hi,
It was indeed a cool interface for showing overlay dialog boxes. I want to keep the background (main page) content dim if the user presses “Close this dialog!”. Can you help me how to achieve this?
Many thanks in advance
Naidu
Thanks this is really useful, however it doesnt work in IE7, is there a workaround for it?
is there anyway to have the box move when you scroll the screen
@steve,
I haven’t come across one so far of the same type. The one above doesn’t do that.
Partha
how did you solve the IE problem? i tried to copy and paste the codes and opened it in my localhost… the box doesn’t work…
@boy tingsi,
Guess you’ve checked out this page in IE. It works with me, though (I use IE8) it looks a bit ugly. Check the codes you’re using. It should work! Best
Can i get a work around to enable this to work in IE6 & 7 ?
@sunny,
Not that I know of! However, blame me for nonchalance, but I won’t be unduly bothered about IE6 & 7 ’cause my log details tell me there are very few visitors with those browsers!
Cheers!
Merci pour ce post.