openElement

EDit de brolysan : une erreur dans le code corrigée.

Hello, à la suite d'une demande sur ce forum, je vous propose ici une méthode et script pour réaliser une fenêtre modale, mais également un didacticiel pour mettre en place cette solution, pour ceux qui sont moins familiers avec le code :

Le didacticiel en vidéo : http://youtu.be/uU0twjcv5zc

à remplacer dans les scripts ci-dessous, les ID des éléments (voir tutoriel ci dessus en cas d'incompréhension).

SCRIPT CSS :

#BlocNoir{
    display: none; /*--masqué par défaut--*/
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0,5;
    z-index: 9999 !important;
}

#PanneauElements{
    display: none; /*--masqué par défaut--*/
    z-index: 99999 !important;
    width:500px; /*--largeur du panneau pour IE--*/
    position:fixed;
}

SCRIPT JAVASCRIPT :

jQuery.fn.centrer = function () {
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

$('#PanneauElements').centrer(true);

$( "#BoutonOuvrir" ).click(function() {
  $('#BlocNoir').fadeTo("slow", 0.8 );
  $('#PanneauElements').fadeIn();
});

$( "#BoutonFermer" ).click(function() {
  $('#BlocNoir').fadeOut();
  $('#PanneauElements').fadeOut();
});

//rencentrage automatique de la fenetre modale
$(function(){         
  $(window).resize(function(){
    $('#PanneauElements').centrer(true);
  });
});

Codes complémentaires facultatifs (à placer à la suite, dans le bloc javascript) : 

pour déclencher l'ouverture de la fenêtre au chargement de la page :

$(document).ready(function(){
$('#BlocNoir').fadeTo("slow", 0.8 );
$('#PanneauElements').fadeIn();
});

pour fermer la fenêtre après un laps de temps :

setTimeout(function () {
  $('#BlocNoir').fadeOut();
  $('#PanneauElements').fadeOut();
}, 15000);

Pour ouvrir la fenêtre après un laps de temps :

setTimeout(function () {
 $('#BlocNoir').fadeTo("slow", 0.8 )
 $('#PanneauElements').fadeIn();
}, 15000);

ici 15000 = 15 secondes.

Et si ce tutoriel vous a plût et qu'il vous apporte de l'aide et des
 idées, n'hésitez pas à me faire un don, au regard du travail nécessaire
 pour le construire, le réaliser, le mettre en ligne, le commenter, etc !

Edité par Larsene - 09 Feb 2015 à 19:08

openElement

[Tuto]Afficher une fenêtre modale (Pop-up)