Developpement Informatique

février 21, 2010

Create Overlay Lightbox For Your Website Free With jQuery

Filed under: JQuery — izaam01 @ 5:49

http://www.2webvideo.com/video-production

Free jQuery For Overlay Dialog Box With Delayed Opening, Free HTML

If you stay in this page for some time and watch the following paragraph 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.

Example of Overlay Dialog Box

This is an example of jQuery overlay dialog box with delayed opening. The delay is set at 7 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.

To see the overlay effect again, simply refresh this page.

Note: The above is done with iframe tag. To see how this works in an entire page, click here.]

The dialog box urges you to subscribe for 2WebVideo’s newsletter by giving your email ID in the form provided therein. If you do not want to subscribe 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 part with their email ID for subscription. 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:

  1. How To Create Overlay Lightbox With jQuery Fancy-Zoom
  2. 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</title>

	<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>	

</head>

<body>

<center><div style="font-family: lucida grande,tahoma,verdana,arial,sans-serif;width:500px;">
<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 7 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>

<style>

#facebox {

	/* overlay is hidden before loading */
	display:none;

	/* standard decorations */
	width:400px;
	border:10px 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;
}

</style>

<!--[if IE]>
   <style>
   .facebox {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333);
       zoom: 1;
    }
    </style>
<![endif]-->

<!-- facebook dialog -->
<div>

	<div>
		<h2>Subscribe To 2WebVideo Newsletter</h2>

		<p>Web professional? Remain updated with top tips and tricks every week. Invaluable info', guaranteed!</p>

		<!-- Begin Signup Form -->

		<form action="" method="post" target="_blank">
			<p>Your Email Address:<br />
			<input value="" style="margin-right: 5px;width: 60%;float: left;z-index: 999;">
			<input value="Subscribe" style="display: block;">
			</p>
		</form>

		<!--End Signup-->

		<p><button> Close This Box!</button></p>
	</div>

</div>

<script>

$(document).ready(function() {

// select the overlay element - and "make it an overlay"
$("#facebox").overlay({

	// custom top position
	top: 10,

	// some expose tweaks suitable for facebox-looking dialogs
	expose: {

		// you might also consider a "transparent" color for the mask
		color: '#F00',

		// load mask
		loadSpeed: 1000,

		// decide transparency
		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 7 seconds, then load the overlay
  setTimeout(function() {
    ol.load();
  }, 7000);

});
</script>

</body>
Publicités

Laisser un commentaire »

Aucun commentaire pour l’instant.

RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Propulsé par WordPress.com.

%d blogueurs aiment cette page :