Précédent   Forum du club des développeurs et IT Pro > Webmasters - Développement Web > JavaScript > Publications JavaScript / AJAX
Publications JavaScript / AJAX Commentez les articles et critiques de livres publiés sur les rubriques JavaScript et AJAX
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Actualité déjà publiée
 
Outils de la discussion
Publicité
'
Vieux 20/10/2009, 21h53   #1
Bovino
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 18 103
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 42
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 18 103
Points : 64 632
Points : 64 632
Par défaut Créez une fenêtre modale avec CSS et jQuery

Bonjour,

Je vous propose une traduction de l'article anglophone de Soh Tanaka : CSS Lightview Style Popup.

Soh, tout au long de cet article, vous présente une méthode permettant de créer une popup CSS du même style que celles utilisées par la bibliothèque Lightview. Cette méthode utilise du CSS et un peu de JavaScript.

N'hésitez pas à nous faire part de vos questions/suggestions

Mise à jour du 10/02/2013 : la bibliothèque jQuery ayant beaucoup évolué depuis l'écriture de cet article, une mise à jour du code a été effectuée pour le rendre compatible avec les versions récentes de jQuery.

Créez une fenêtre modale avec CSS et jQuery.

Bonne lecture !
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est actuellement connecté   Envoyer un message privé Réponse avec citation 30
Vieux 22/10/2009, 17h51   #2
le_chomeur
Expert Confirmé Sénior
 
Avatar de le_chomeur
 
Développeur informatique
Inscription : février 2006
Messages : 3 612
Détails du profil
Informations personnelles :
Localisation : France

Informations professionnelles :
Activité : Développeur informatique

Informations forums :
Inscription : février 2006
Messages : 3 612
Points : 4 389
Points : 4 389
Il ne manque qu'une chose ( souvent oubliée ) => les listes déroulantes et objets flash passent au dessus ...

il faut utiliser une iframe en background ...
__________________
est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )
le_chomeur est déconnecté   Envoyer un message privé Réponse avec citation 10
Vieux 12/02/2011, 22h25   #3
jojolito
Invité de passage
 
Inscription : février 2011
Messages : 7
Détails du profil
Informations forums :
Inscription : février 2011
Messages : 7
Points : 4
Points : 4
Par défaut Créez votre popup CSS du même style que Ligthview

Bonsoir,
Dans le précédent message le chômeur fait une remarque sur cette méthode et écrit : "il faut utiliser une iframe en background ..."
En effet, lorsque la popup est ouverte au-dessus de la zone opacifiée le fait de passer la souris sur cette zone déclenche le déploiement de la liste déroulante.
Vous serait-il possible de me donner plus d'informations pour éviter cela ?
Merci pour votre réponse
Jojolito
jojolito est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 09/03/2011, 11h13   #4
McBenny
Membre à l'essai
 
Inscription : octobre 2004
Messages : 12
Détails du profil
Informations forums :
Inscription : octobre 2004
Messages : 12
Points : 23
Points : 23
Hello,

Joli design mais un oubli de taille pour les puristes : l'accessibilité !
Si je n'ai pas Javascript, je n'ai pas accès au contenu.

Le principe de base il me semble est de donner accès au contenu, hors tout besoin technologique spécifique, puis d'améliorer l'expérience utilisateur.

Dommage.
McBenny est déconnecté   Envoyer un message privé Réponse avec citation 10
Vieux 09/03/2011, 23h42   #5
danielhagnoul
Rédacteur
 
Avatar de danielhagnoul
 
Homme Daniel Hagnoul
Étudiant perpétuel
Inscription : février 2009
Messages : 3 843
Détails du profil
Informations personnelles :
Nom : Homme Daniel Hagnoul
Âge : 62
Localisation : Belgique

Informations professionnelles :
Activité : Étudiant perpétuel
Secteur : Enseignement

Informations forums :
Inscription : février 2009
Messages : 3 843
Points : 14 338
Points : 14 338
Bonsoir

L'article et le code sont intéressants, mais les codes (CSS, HTML, et jQuery) peuvent être améliorés.

Ci-dessous ma version HTML5 (je travaille pour l'avenir ), elle fonctionne comme prévu dans IE9, Chrome 10 et Firefox 4.

Pour les navigateurs obsolètes, le code du popup devrait fonctionner en remplaçant simplement le tag "section" par un tag "div".

@le_chomeur : je ne vois pas le problème, avec le code CSS corrigé bien entendu.

[Édition du 2011-06-20T22:00:00.000+02:00]

Motif : correction du code de l'exemple.

Lors du passage de la version 1.5.1 à la version 1.6+ la manière d'écrire un attribut data HTML5 a été modifiée. On doit maintenant impérativement écrire data-popup-class au lieu de data-popupClass, idem pour data-popup-width.

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
        .voile-noir {
            position: fixed;
            display: none;
            left: 0;
            top: 0; 
            width: 100%;
            height: 100%;
            opacity: 0.75;
            background: gray; 
            z-index: 9999;
        }
        .popup-block{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            padding: 20px; 	
            z-index: 99999;
            font-size: 1.2em;
            background: #fff;
            border: 20px solid #ddd;
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        .popup p {
            padding: 5px 10px;
            margin: 5px 0;
        }
        .popup-btn-close {
            float: right; 
            margin: -55px -55px 0 0;
        }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
        <a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">Voir la pop-up - Width = 500px</a>
        <!--
            Il ne manque qu'une chose ( souvent oublié ) => les listes déroulante et objet flash passent au dessus ...
            il faut utiliser une iframe en background ...
        -->
        <form style="display:block;width:300px;margin-left:500px;margin-top:100px;">
            <select>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option selected="selected">Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
                <option>Un mot pour remplir suffisament l'espace disponible</option>
            </select>
        </form>
	</section>
    <section class="popup-block"> 
        <img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/bomber.gif" alt="Lil bomb dude" style="float: right; margin: 50px 0 0 20px;" /> 
        <h2>Popup #1</h2> 
        <p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p> 
        <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
    </section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
        $(function(){
            $(".popup-light").click(function() {
                var obj = $(this),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });
    </script>
</body>  
</html>
__________________

FAQ jQuery

Mon cahier d’exercices sur jQuery & Co

plugin dialogModal

Si un message vous a aidé ou vous semble pertinent, votez pour lui !
danielhagnoul est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 11/04/2011, 14h16   #6
le_chomeur
Expert Confirmé Sénior
 
Avatar de le_chomeur
 
Développeur informatique
Inscription : février 2006
Messages : 3 612
Détails du profil
Informations personnelles :
Localisation : France

Informations professionnelles :
Activité : Développeur informatique

Informations forums :
Inscription : février 2006
Messages : 3 612
Points : 4 389
Points : 4 389
Salut danielhagnoul

Sous ie6/7 firefox 3.X , les éléments flash ainsi que les listes déroulantes passaient par dessus quelque soit le z-index

je viens de tester , très bel exemple , fonctionne parfaitement sous firefox 4.0 , chrome , mais plante sous ie8 :

Citation:
Message*: Demande d'accès à la méthode ou aux propriétés inattendue.
Ligne*: 16
Caractère*: 55923
Code*: 0
URI*: http://code.jquery.com/jquery-1.5.1.min.js
pour la compatibilité je génèrerais tout de même une iframe en visibilité hidden


EDIT : la phrase navigateur obsolète m'avait échappé méa culpa ^^
__________________
est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )
le_chomeur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 23/04/2011, 01h35   #7
Zboyle
Invité de passage
 
Homme
Lycéen
Inscription : avril 2011
Messages : 7
Détails du profil
Informations personnelles :
Sexe : Homme
Âge : 18
Localisation : France

Informations professionnelles :
Activité : Lycéen
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : avril 2011
Messages : 7
Points : 4
Points : 4
Bonjour,

Serait il possible créer une fenêtre modale dans laquel un membre puisse se connecter ?

merci
Zboyle est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 23/04/2011, 10h55   #8
Bovino
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 18 103
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 42
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 18 103
Points : 64 632
Points : 64 632
Non, il est strictement interdit de mettre un formulaire d'inscription dans cette fenêtre !

Plus sérieusement, le contenu de la fenêtre est du code HTML classique, qu'est-ce qui t'empêcherait d'y mettre un formulaire ?
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est actuellement connecté   Envoyer un message privé Réponse avec citation 10
Vieux 23/04/2011, 12h41   #9
Zboyle
Invité de passage
 
Homme
Lycéen
Inscription : avril 2011
Messages : 7
Détails du profil
Informations personnelles :
Sexe : Homme
Âge : 18
Localisation : France

Informations professionnelles :
Activité : Lycéen
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : avril 2011
Messages : 7
Points : 4
Points : 4
Salut,

Citation:
Non, il est strictement interdit de mettre un formulaire d'inscription dans cette fenêtre !
C'est une blague ?


Citation:
Plus sérieusement, le contenu de la fenêtre est du code HTML classique, qu'est-ce qui t'empêcherait d'y mettre un formulaire ?

Tout à fait je pourrai, je pense
Zboyle est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 11/05/2011, 08h44   #10
SpaceFrog
Rédacteur/Modérateur

 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 32 825
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 32 825
Points : 51 402
Points : 51 402
Je rencontre beaucoup de soucis de compatibilité sous IE

IE6 => attention a la transparence des png !
le bouton close en particulier ... on peut mettre un gif à la place.
ou tenter d'utiliser un pngfix.
IE7 => marche pas du tout
IE8 => le bouton de fermeture est derrière le cadre
réoslu en modifiant le css ainsi
Code :
1
2
3
4
5
6
7
img.btn_close {
	position:relative;
	z-index:5;
	border:0;
	float: right;
	margin: -55px -55px 0 0;
}
...
__________________
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
Humour
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 27/05/2011, 20h55   #11
Asli Bilal
Nouveau Membre du Club
 
Homme Bilal Asli
Ingénieur qualité méthodes
Inscription : avril 2011
Messages : 47
Détails du profil
Informations personnelles :
Nom : Homme Bilal Asli
Âge : 24
Localisation : France, Hauts de Seine (Île de France)

Informations professionnelles :
Activité : Ingénieur qualité méthodes
Secteur : Transports

Informations forums :
Inscription : avril 2011
Messages : 47
Points : 39
Points : 39
Salut,

J'ai tester chez moi et apparemment ça ne fonctionne pas..
Pas d'opacité ni de bouton close

J'ai chargé jQuery à partir de Google
Code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
entre les balises J'ai essayé sous ie9, chrome et ff4..

Des idées?

Merci Bilou
Asli Bilal est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 27/05/2011, 21h19   #12
Bovino
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 18 103
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 42
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 18 103
Points : 64 632
Points : 64 632
Citation:
Des idées?
Dans la mesure ou la page d'exemple fonctionne très bien sous FF, IE, Chrome, Opera et Safari et comme il semble que mon chat rechigne à se laisser éventrer pour que je puisse essayer de deviner ton code dans ses entrailles, la réponse simple à ta question simple est : non, pas d'idée...
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est actuellement connecté   Envoyer un message privé Réponse avec citation 00
Vieux 27/05/2011, 21h55   #13
Asli Bilal
Nouveau Membre du Club
 
Homme Bilal Asli
Ingénieur qualité méthodes
Inscription : avril 2011
Messages : 47
Détails du profil
Informations personnelles :
Nom : Homme Bilal Asli
Âge : 24
Localisation : France, Hauts de Seine (Île de France)

Informations professionnelles :
Activité : Ingénieur qualité méthodes
Secteur : Transports

Informations forums :
Inscription : avril 2011
Messages : 47
Points : 39
Points : 39
Et bien j'ai fait un copier/coller du tuto
->Structure HTML
->Mise en forme CSS
->Mise en place du jQuery

J'ai mis le code jQuery entre de nouvelles balises <script></script> dans le <head></head>
Je ne comprends pas ce que j'ai mal fait..

Tant pis
Merci
Asli Bilal est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 27/05/2011, 22h06   #14
Bovino
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 18 103
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 42
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 18 103
Points : 64 632
Points : 64 632
Ben de deux choses l'une, soit lorsque tu testes la page d'exemple (http://sohtanaka.developpez.com/tuto...uery/fichiers/) ça ne fonctionne pas chez toi et dans ce cas, tu ferais bien de faire désenvouter ton PC, soit ça fonctionne et dans ce cas, c'est ton code qui est problématique et il nous sera impossible de te dire pourquoi sans le voir...
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est actuellement connecté   Envoyer un message privé Réponse avec citation 00
Vieux 27/05/2011, 22h23   #15
Asli Bilal
Nouveau Membre du Club
 
Homme Bilal Asli
Ingénieur qualité méthodes
Inscription : avril 2011
Messages : 47
Détails du profil
Informations personnelles :
Nom : Homme Bilal Asli
Âge : 24
Localisation : France, Hauts de Seine (Île de France)

Informations professionnelles :
Activité : Ingénieur qualité méthodes
Secteur : Transports

Informations forums :
Inscription : avril 2011
Messages : 47
Points : 39
Points : 39
Ok je vais voir du côté du code

Super article en tout cas!
Asli Bilal est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 28/05/2011, 10h37   #16
Bovino
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 18 103
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 42
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 18 103
Points : 64 632
Points : 64 632
Citation:
Envoyé par Asli Bilal
Ok je vais voir du côté du code
Ben, ce que je voulais surtout dire, c'est montre-le nous, on pourra comme ça y jeter un oeil extérieur et voir là ou ça cloche
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est actuellement connecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/05/2011, 11h30   #17
Acasapeubas
Invité régulier
 
Homme
Inscription : mai 2011
Messages : 3
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France

Informations forums :
Inscription : mai 2011
Messages : 3
Points : 6
Points : 6
Bonjour,

==> Asli Bilal

Pour ton problème de fermeture de fenêtre modale. Tu dois ajouter dans le HTML :
Code :
1
2
3
4
5
6
7
8
9
<div id="popup_name" class="popup_block">
	<h2>Developpez.com</h2>
	<p>Soh Tanaka est traduit sur developpez.com. 
              <a class="close" href="#" title="Fermeture" ></a>
       </p>


</div>
Car dans le script il y a :
Code :
1
2
3
4
5
6
7
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
	$('#fade , .popup_block').fadeOut(function() {
		$('#fade, a.close').remove();  //...ils disparaissent ensemble
	});
	return false;
});
Si tu le souhaites, tu peux aussi le faire avec une image.

En espérant t'avoir aidé.

==>Allez plus loin.<==

Une fois la fenêtre modale fermé, si je reclique sur le lien d'ouverture de celle-ci. Le lien ou l'image de fermeture a disparu sauf si je réactualise !
Pour éviter cela, j'ai enlevé :
Dans :
Code :
1
2
3
4
5
6
7
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
	$('#fade , .popup_block').fadeOut(function() {
		$('#fade, a.close').remove();  //...ils disparaissent ensemble
	});
	return false;
});
Soit [Désolé pour la coloration rouge pourtant il n'ya pas de balise COLOR dans le code ci-dessous !]:
Code :
1
2
3
4
5
6
7
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
	$('#fade , .popup_block').fadeOut(function() {
		$('#fade, a.close');  //...ils disparaissent ensemble
	});
	return false;
});
Cela est fonctionnel. Néanmoins, est-ce que cette méthode fait parti des bonnes pratiques de programmation ? Ou il y a une autre façon plus propre, plus pro d'arriver à ce résultat ?

Merci de m'éclairer.

Bon week-end à tous.
Acasapeubas est déconnecté   Envoyer un message privé Réponse avec citation 10
Vieux 02/06/2011, 22h14   #18
Asli Bilal
Nouveau Membre du Club
 
Homme Bilal Asli
Ingénieur qualité méthodes
Inscription : avril 2011
Messages : 47
Détails du profil
Informations personnelles :
Nom : Homme Bilal Asli
Âge : 24
Localisation : France, Hauts de Seine (Île de France)

Informations professionnelles :
Activité : Ingénieur qualité méthodes
Secteur : Transports

Informations forums :
Inscription : avril 2011
Messages : 47
Points : 39
Points : 39
Merci ça fonctionne désormais!
Asli Bilal est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/08/2011, 13h07   #19
simonlaurent5000
Invité de passage
 
Homme
Inscription : juillet 2011
Messages : 24
Détails du profil
Informations personnelles :
Sexe : Homme

Informations forums :
Inscription : juillet 2011
Messages : 24
Points : 3
Points : 3
Par défaut Avec base de données

Bonjour,

Pourriez-vous me diriger vers une solution qui permet en cliquant sur un lien du style informationsuser.php?id_user=$_GET[id_user] et que la fenetre modale puisse aller récupérer les informations dans la base de données à partir de l'id_user ?



Merci beaucoup
simonlaurent5000 est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 08/10/2011, 23h58   #20
GTi
Invité de passage
 
Inscription : janvier 2006
Messages : 20
Détails du profil
Informations forums :
Inscription : janvier 2006
Messages : 20
Points : 2
Points : 2
merci pour cette traduction, mais j'aimerais faire en sorte que la fenetre modale s'ouvre tout seule à l'ouverture de ma page d'accueil.

Il doit juste falloir ajouter un petit bout de code mais mon niveau est encore bien trop faible même pour ça.

Merci d'avance
GTi est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Actualité déjà publiée Cette discussion est résolue.
Outils de la discussion

Navigation rapide


Fuseau horaire GMT +2. Il est actuellement 12h11.


 
 
 
 
Partenaires

Hébergement Web