mercredi , 24 avril 2024
De nouveau un petit script permettant l'ouverture d'une popup style lightbox au chargement de la page, on pourra également programmer sa fermeture.

Jquery fancybox onload + delay avant fermeture

De nouveau un petit script permettant l’ouverture d’une popup style lightbox au chargement de la page, on pourra également programmer le délai avant la fermeture.
Cette fois-çi en utilisant fancybox

[voir l’exemple : fancybox onload + delay avant fermeture]

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

<!-- load the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- load the fancybox -->
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />
<!-- appel de la fancybox -->
<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#popup").html(),
             {
                type : 'iframe',
                href : 'http://www.site-web-creation.net', // url vers notre page html qui sera chargée dans la popup en mode iframe
                maxWidth : 800,
        maxHeight : 600,
        fitToView : false,
        width : '70%',
        height : '70%',
        autoSize : false

        }
        );setTimeout("parent.$.fancybox.close()", 10000); // temps en milliseconde avant fermeture de la popup
    });
</script>

puis dans le body :

<a id="popup" style="display:none;"></a>
// notre #popup en display none
Click to rate this post!
[Total: 3 Average: 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 …

Laisser un commentaire

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