Publicité
+ Répondre à la discussion Actualité déjà publiée
Page 1 sur 4 1234 DernièreDernière
Affichage des résultats 1 à 20 sur 65
  1. #1
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 168
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 168
    Points : 86 185
    Points
    86 185

    Par défaut [Article] 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 !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Expert Confirmé Sénior
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    février 2006
    Messages
    3 638
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : février 2006
    Messages : 3 638
    Points : 4 714
    Points
    4 714

    Par défaut

    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 )

  3. #3
    Invité régulier
    Inscrit en
    février 2011
    Messages
    7
    Détails du profil
    Informations forums :
    Inscription : février 2011
    Messages : 7
    Points : 5
    Points
    5

    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

  4. #4
    Membre à l'essai
    Inscrit en
    octobre 2004
    Messages
    12
    Détails du profil
    Informations forums :
    Inscription : octobre 2004
    Messages : 12
    Points : 24
    Points
    24

    Par défaut

    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.

  5. #5
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro Daniel Hagnoul
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    4 657
    Détails du profil
    Informations personnelles :
    Nom : Homme Daniel Hagnoul
    Âge : 64
    Localisation : Belgique

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

    Informations forums :
    Inscription : février 2009
    Messages : 4 657
    Points : 17 589
    Points
    17 589

    Par défaut

    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>

    Propositions de Q/R pour la FAQ jQuery

    plugin dialogModal

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  6. #6
    Expert Confirmé Sénior
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    février 2006
    Messages
    3 638
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : février 2006
    Messages : 3 638
    Points : 4 714
    Points
    4 714

    Par défaut

    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 :

    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 )

  7. #7
    Invité de passage
    Femme Profil pro
    Directeur de projet
    Inscrit en
    avril 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Directeur de projet
    Secteur : High Tech - Éditeur de logiciels

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

    Par défaut

    Bonjour,

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

    merci

  8. #8
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 168
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 168
    Points : 86 185
    Points
    86 185

    Par défaut

    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 !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Invité de passage
    Femme Profil pro
    Directeur de projet
    Inscrit en
    avril 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Directeur de projet
    Secteur : High Tech - Éditeur de logiciels

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

    Par défaut

    Salut,

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


    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

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    35 109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    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 : 35 109
    Points : 59 400
    Points
    59 400

    Par défaut

    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.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Nouveau Membre du Club
    Homme Profil pro Bilal Asli
    Ingénieur qualité méthodes
    Inscrit en
    avril 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Nom : Homme Bilal Asli
    Âge : 26
    Localisation : France, Hauts de Seine (Île de France)

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

    Informations forums :
    Inscription : avril 2011
    Messages : 48
    Points : 34
    Points
    34

    Par défaut

    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

  12. #12
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 168
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 168
    Points : 86 185
    Points
    86 185

    Par défaut

    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 !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  13. #13
    Nouveau Membre du Club
    Homme Profil pro Bilal Asli
    Ingénieur qualité méthodes
    Inscrit en
    avril 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Nom : Homme Bilal Asli
    Âge : 26
    Localisation : France, Hauts de Seine (Île de France)

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

    Informations forums :
    Inscription : avril 2011
    Messages : 48
    Points : 34
    Points
    34

    Par défaut

    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

  14. #14
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 168
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 168
    Points : 86 185
    Points
    86 185

    Par défaut

    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 !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  15. #15
    Nouveau Membre du Club
    Homme Profil pro Bilal Asli
    Ingénieur qualité méthodes
    Inscrit en
    avril 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Nom : Homme Bilal Asli
    Âge : 26
    Localisation : France, Hauts de Seine (Île de France)

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

    Informations forums :
    Inscription : avril 2011
    Messages : 48
    Points : 34
    Points
    34

    Par défaut

    Ok je vais voir du côté du code

    Super article en tout cas!

  16. #16
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 168
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 168
    Points : 86 185
    Points
    86 185

    Par défaut

    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 !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  17. #17
    Invité régulier
    Homme Profil pro
    Inscrit en
    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

    Par défaut

    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.

  18. #18
    Nouveau Membre du Club
    Homme Profil pro Bilal Asli
    Ingénieur qualité méthodes
    Inscrit en
    avril 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Nom : Homme Bilal Asli
    Âge : 26
    Localisation : France, Hauts de Seine (Île de France)

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

    Informations forums :
    Inscription : avril 2011
    Messages : 48
    Points : 34
    Points
    34

    Par défaut

    Merci ça fonctionne désormais!

  19. #19
    Invité de passage
    Homme Profil pro
    Inscrit en
    juillet 2011
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : juillet 2011
    Messages : 24
    Points : 4
    Points
    4

    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

  20. #20
    GTi
    GTi est déconnecté
    Invité de passage
    Inscrit en
    janvier 2006
    Messages
    21
    Détails du profil
    Informations forums :
    Inscription : janvier 2006
    Messages : 21
    Points : 2
    Points
    2

    Par défaut

    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

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •