Imprimer la Page | Close Window

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

Imprimé depuis: openElement Website
Categorie:

openElement


Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: http://forum.openelement.com/en/forum_posts.asp?TID=18771
Date: Jul 19 2019 à 3:14pm
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: [Tuto]Afficher une fenêtre modale (Pop-up)
Posté par: Larsene
Sujet: [Tuto]Afficher une fenêtre modale (Pop-up)
Posté le: Oct 06 2013 à 11:47am
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" rel="nofollow - 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 !
https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G39GM7UC9EDWG&lc=FR&item_name=Larsene%20%2d%20%20Tutoriels&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" rel="nofollow">Faire un don



Réponses:
Posté par: Hobby001
Posté le: May 06 2019 à 3:56pm
Notes:

Avec certains modèles il vaut mieux mettre les éléments de la fenêtre modale dans le footer


Pour utiliser la fonction sur 3 boutons séparés
 
Ajoutez une Classe Perso sur chacun des trois boutons, disons: callForm

Remplacez le code:

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

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


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


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Hobby001
Posté le: May 07 2019 à 4:37pm
Notes:

Ce tutoriel est maintenant verrouillé.  Pour toute question sur l'application sur votre projet ouvrez un nouveau sujet.

Si vous jugez qu'une modification doit être faite au tutoriel, demandez à un membre de l'Admin group pour qu'il soit temporairement déverrouillé.

Merci






-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk