Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto]Afficher une fenêtre modale (Pop-up)
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

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

 Répondre Répondre
Auteur
Message
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5382
Lien Direct à ce Post Sujet: [Tuto]Afficher une fenêtre modale (Pop-up)
    Envoyé : 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

à 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 !
Faire un don


Edité par Larsene - 09 Feb 2015 à 19:08
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 4598
Lien Direct à ce Post Envoyé : 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.


Edité par brolysan - 27 Mai 2019 à 20:25
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 4598
Lien Direct à ce Post Envoyé : 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




Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,016 secondes.
Acheter votre vélo en ligne