Imprimer la Page | Fermez la fenêtre

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

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=18771
Date: 28 Mar 2024 à 17:59
Version logiciel: Web Wiz Forums 12.04 - 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: 06 Oct 2013 à 12:47
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: 06 Mai 2019 à 16:56
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.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Mai 2019 à 17:37
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






-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net