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

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

 Répondre Répondre Page  123 11>
Auteur
Message
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5350
Options des messages Options des messages   Thanks (2) Thanks(2)   Citer Larsene Citer  RépondreRéponse 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
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 1946
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Oct 2013 à 17:04
OUPS Dead J'ai tout fais comme il faut, en copiant le code et en le modifiant, Mais au moment de prévisualiser ???????? il n'y a rien qui se passe l'écran est bien noir mais la fenêtre modale avec du texte n’apparaît pas ! (Codes css et Javascript)

J'ai fais et refait pensant que je faisais des erreurs dans les ID, mais toujours rien !

J'ai fais un copier collé des scripts, est-ce une erreur ?

Je ne comprends pas ! Snif Cry !!!!!!


Edité par Maurice306 - 06 Oct 2013 à 19:06
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 1946
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Oct 2013 à 20:00
Angry Après toutes mes péripéties, j'ai réussit à faire fonctionner "la bête", il y avait un autre Bloc de Code css que j'ai supprimé, je ne sais pas si c'est ça qui buguait ??? pour l'instant c'est bon, je vais voir sur l'autre site.

Remarque : après chaque essai je ne fermais pas OE, ce que j'ai fais la dernière fois ???

En fin je commençais à paniquer ! j'ai remis le Bloc de Code pour faire apparaitre la main sur les boutons et tout fonctionne !! Clown

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, Larsene !


Edité par Maurice306 - 06 Oct 2013 à 20:06
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5350
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Oct 2013 à 08:42
Super. Content que vous ayez pu appliquer ce didacticiel que j'ai essayé de faire complet !

Bien sûr, si vous avez déjà un bloc CSS avec d'autres propriétés pour les objets, cela peut nuire au bon fonctionnement du script.

De même, il faut être très précis sur la syntaxe (une accolade n'est pas une parenthèse, par exemple), et cela fonctionne !
Haut de la page
patricia allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 12 Oct 2006
Pays: Dominica
Status: Inactif
Points: 1730
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer patricia Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 10 Nov 2013 à 16:30
Un grand merci pour cette explication très claire et à la portée de la débutante que je suis ! Je cherchais depuis longtemps comment faire et les explications trouvées jusqu'à présent sur divers forums ne m'avaient pas permis de réussir.
Cordialement,
Patricia
"Si tout ceux qui croient avoir raison n'avaient pas tort, la vérité ne serait pas loin" Pierre DAC
Haut de la page
Barrone allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 14 Nov 2013
Pays: France
Status: Inactif
Points: 9
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Barrone Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Nov 2013 à 10:42
Bonjour,   Sur la version 1.34 r8 puis je appliquer cette programmation, je ne trouve qu'un bloc code, et je ne  trouve pas le  bouton ajouter un bloc code après la saisie des 2 première instruction .

Par avance merci
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 8083
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Nov 2013 à 11:40
Message posté par Barrone Barrone a écrit:

Bonjour,   Sur la version 1.34 r8 puis je appliquer cette programmation, je ne trouve qu'un bloc code, et je ne  trouve pas le  bouton ajouter un bloc code après la saisie des 2 première instruction .

Par avance merci

peut etre temps de passer a la version 1.42R7 non?
Haut de la page
Barrone allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 14 Nov 2013
Pays: France
Status: Inactif
Points: 9
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Barrone Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Nov 2013 à 11:45
Oui mais quand j'ai essayé de faire évoluer la version mon site ne s'ouvre plus que faire ? il y a t il une façon de procéder  merci

 
Haut de la page
caprice allez vers le bas
Moderator Group
Moderator Group
Avatar

Depuis le: 21 Mar 2008
Pays: France
Status: Inactif
Points: 153
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer caprice Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Nov 2013 à 12:07
Bonjour

As tu essayé d'ouvrir ton site depuis la sauvegarde créé par OE lors de la mise a jour de version ?
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 8083
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Nov 2013 à 12:07
Message posté par Barrone Barrone a écrit:

Oui mais quand j'ai essayé de faire évoluer la version mon site ne s'ouvre plus que faire ? il y a t il une façon de procéder  merci

 

c'est a dire? Une erreur? Il ne se lance pas? plus d'infos?
Haut de la page
 Répondre Répondre Page  123 11>
  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,031 secondes.
Réserver en ligne un taxi, vtc, navette