lundi , 18 novembre 2019

Jquery lightbox onload

Voici un petit script qui permet d’ouvrir une fenêtre style facebox au chargement d’une page, et également la possibilité de la refermer automatiquement après un temps donné.

[voir l’exemple]

Tout d’abord dans la section head de votre page :

<!-- load the jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- ALL jQuery Tools. No jQuery library -->
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>

Puis le style de la lightbox :

<style>
#facebox {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	text-align: left;
	display:none;
}
#facebox .popup {
	position:relative;
	border:3px solid rgba(0,0,0,0);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
	-moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
	box-shadow:0 0 18px rgba(0,0,0,0.4);
}
#facebox .content {
	display:table;
	width: 370px;
	background: #fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
</style>

Maintenant créons notre div#facebox juste après la balise body

<div id="facebox">
  <div class="content">
    <button class="close" style="border:none; background:#3E1A0B; color:white; text-align:center; font-weight:bold; position:absolute; top:-25px; left:300px; margin:0px; padding:0 2px; width:70px; height:20px; line-height:20px"> X FERMER </button>
    <div style="padding:20px;">
      <h1>Une belle facebox</h1>
      <div class="resume">resume</div>
    </div>
  </div>
</div>

et pour finir l’appel juste avant la balise de fin du body

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
// select the overlay element - and "make it an overlay"
$("#facebox").overlay({

	// custom top position
	top: 160,
	// some mask tweaks suitable for facebox-looking dialogs
	mask: {
        // you might also consider a "transparent" color for the mask
		color: '#3e1a0a',
		// load mask a little faster
		loadSpeed: 1000,
		// very transparent
		opacity: 0.7
	},
    // disable this for modal dialog-type of overlays
	closeOnClick: true,
	// 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();
 }, 500);
setTimeout(function() {
	ol.close();
 }, 7000);
});
</script>
[Total : 12    Moyenne : 4/5]

A propos jeanluc

Check Also

jQuery loader

Nous allons voir comment réaliser un plug-in loader (chargement) de page avec JavaScript et notamment …

12 Commentaires

  1. c’est cool comme script, mais il ne fonctionne pas sous IE, comment faire que cela marche

  2. Bonjour, je voudrais utiliser se script qui fonctionne a merveille seul bémol dans mon cas j aurais besoin qu il ne s’ouvre qu une fois par session. auriez vous la possibilité de me donner une solution. je ne suis pas programmeur. d avance merci. cordialement.

  3. super le code, merci beaucoup 🙂

  4. Comment modérer l’apparition de cette fenêtre exemple 1 vue par période de 24h ip ?

    Merci beaucoup

  5. code marche parfaitement,
    mais ce que je souhaite c’est que la page facebox ce charge en premier plan de la page accueil ou index par exemple et que apres avoir faire le traitement souhaité dans ke facebox je peux la fermer en cliquant sur fermer ou ok par exemple.
    est ce que je suis dans la bonne voie en cherchant à le faire avec jQuery ou dois-je le faire avec ajax ???

  6. est il possible de fermer le lightbox automatiquement si une nouvelle url se charge ?

  7. l’url se charge via un lien cliquable dans la lightbox ? dans ce cas un target=_parent devrait fonctionner

  8. En 2016, toujours aussi efficace ! Merci !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *