Publicité
+ Répondre à la discussion Actualité déjà publiée
Page 3 sur 4 PremièrePremière 1234 DernièreDernière
Affichage des résultats 41 à 60 sur 65
  1. #41
    Invité régulier
    Inscrit en
    juillet 2003
    Messages
    44
    Détails du profil
    Informations forums :
    Inscription : juillet 2003
    Messages : 44
    Points : 6
    Points
    6

    Par défaut

    bon .... j'ai reussi a regler mon probleme de compatibilité jquery
    par contre
    j'ai toujours un soucis. la croix ne saffiche pas ( pas bien grave j'ai mis un lien femeture) ...

    mais je n'arrive toujours pas a ce que l'ouverture de ce popup se face automatiquement lorsque on arrive sur mon site

    comment dois je faire ( j'ai utilisé le script initial ni plus ni moins)

    merci de votre aide

  2. #42
    Invité de passage
    Inscrit en
    mars 2011
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : mars 2011
    Messages : 6
    Points : 3
    Points
    3

    Par défaut

    Citation Envoyé par danielhagnoul Voir le message
    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>
    Cher Daniel Hagnoul
    Merci pour ta contribution de ce code version html5
    J'aurais une questions car je suis hyper nul en prog mais m'en sort un peu
    Le contenu affiché par ton code fonctionne mais si on a deux popup différente, il est impossible de les différencier
    peux tu m'aider a mettre en place des id pour différencier le contenu des popups
    merci a vous tous

  3. #43
    Invité de passage
    Inscrit en
    mars 2011
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : mars 2011
    Messages : 6
    Points : 3
    Points
    3

    Par défaut

    une petite réponse svp, je sèche grave
    comment différencier dans mon code le contenu des popups
    avec je pense les balise id et rel

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

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

    Informations forums :
    Inscription : février 2009
    Messages : 4 436
    Points : 17 739
    Points
    17 739

    Par défaut

    J'ai modifié le code pour gérer plusieurs popup ayant la classe popup-block, popup-block2, popup-block3, etc.

    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
    <!doctype html>
    <html lang="fr">
    <head>
    	<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, .popup-block2 {
                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>
    		<br/><br/>
            <a href="#" class="popup-light" data-popup-class="popup-block2" data-popup-width="400px">Voir la pop-up - Width = 400px</a>
    	</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>
        <section class="popup-block2"> 
            <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 #2</h2> 
    		<p>Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet.</p>
    		<p>Vivamus eu ante. Morbi tristique augue quis magna. Nullam tristique lorem id neque. Nam nibh elit, lobortis ac, euismod eu, feugiat id, diam. Etiam dui est, fringilla eget, dictum faucibus, ultrices ut, massa. Duis tempor.</p>
        </section>
    	<script src="http://code.jquery.com/jquery-1.8.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" ).on( "click", ".popup-btn-close, .voile-noir", function(){
                    $( ".voile-noir , [class^='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 !

  5. #45
    Invité de passage
    Inscrit en
    mars 2011
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : mars 2011
    Messages : 6
    Points : 3
    Points
    3

    Par défaut

    Merci Daniel, c'est la belgium attitude
    Je test cela est je te dis ca
    Merci encore, je commençais a désespérer

  6. #46
    Invité de passage
    Homme Profil pro Antoine
    Inscrit en
    septembre 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Nom : Homme Antoine
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : septembre 2012
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Ton tutoriel est vraiment top...Simple et Efficace !

    Et un grand merci pour ton précédent code

  7. #47
    Invité de passage
    Inscrit en
    octobre 2012
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : octobre 2012
    Messages : 2
    Points : 2
    Points
    2

    Par défaut

    Merci beaucoup pour ce tuto, il est génial.

    J'ai juste une question. Je souhaiterais qu'après avoir fermé la popup, l'utilisateur soit redirigé vers une nouvelle page (à la place de la page d'origine). Est-ce possible? J'ai essayé de remplacer les href par mon url, mais rien ne se passe.

    Merci encore pour ce tuto, et pour votre aide.

  8. #48
    Invité de passage
    Inscrit en
    octobre 2012
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : octobre 2012
    Messages : 2
    Points : 2
    Points
    2

    Par défaut

    Citation Envoyé par skybuck Voir le message
    bon .... j'ai reussi a regler mon probleme de compatibilité jquery
    par contre
    j'ai toujours un soucis. la croix ne saffiche pas ( pas bien grave j'ai mis un lien femeture) ...

    mais je n'arrive toujours pas a ce que l'ouverture de ce popup se face automatiquement lorsque on arrive sur mon site

    comment dois je faire ( j'ai utilisé le script initial ni plus ni moins)

    merci de votre aide
    Pour la croix, c'est normal, il faut que tu importes ta propre image de croix, au sein d'un <img src="" class="close" ...>

    Pour que la pop-up se fasse à l'ouverture du site, c'est assez simple, dans le css "popup_block", tu enlèves le "display:none" et tu mets un "display:inline" ou "inline-block"... Normalement la popup s'affichera automatiquement.

  9. #49
    Invité de passage
    Homme Profil pro christophe
    Développeur Web
    Inscrit en
    janvier 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Nom : Homme christophe
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2013
    Messages : 1
    Points : 1
    Points
    1

    Par défaut soucis avec des area

    Bonjour,

    je souhaite déterrer ce topic...

    j'ai utilisé le script pour faire des popups en utilisant des liens <a> ce qui fonctionne très bien. Mon soucis se situe au niveau d'une map où j'ai donc placé des area. Si je met le même lien du href de la balise <a> que dans le href du l'area, ça ne fonctionne pas, même en ayant adapté le jquery pour que le l'action se passe lorsque je clic sur l'area de mon image...
    Des idées?
    Il y a un autre moyen qu'en faisant un windows.open() ?

  10. #50
    Candidat au titre de Membre du Club
    Homme Profil pro Cédric
    Étudiant
    Inscrit en
    avril 2011
    Messages
    40
    Détails du profil
    Informations personnelles :
    Nom : Homme Cédric
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2011
    Messages : 40
    Points : 10
    Points
    10

    Par défaut fade

    Bonjour, j'ai utilisé ce script,

    mais j'ai un souci avec le fond opaque qui parait devant la fenêtre...

    j'ai pourtant jouer avec les z-index...mais rien n'y fait...

    merci pour votre aide

  11. #51
    lvr
    lvr est déconnecté
    Membre chevronné Avatar de lvr
    Inscrit en
    avril 2006
    Messages
    727
    Détails du profil
    Informations forums :
    Inscription : avril 2006
    Messages : 727
    Points : 622
    Points
    622

    Par défaut

    Petite erreur:

    Dans le tuto je lis:
    Code :
    1
    2
            //Effet fade-in du fond opaque
            $('body').append(''); //Ajout du fond opaque noir
    Et le fond noir n'apparaît pas.

    Dans le code utilisé dans mon browser (la source) le code est
    Code :
    1
    2
            //Effet fade-in du fond opaque
            $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
    Et effectivement ça marche mieux...


    Idem avec le
    Code :
    1
    2
    3
    4
            $('#' + popID).fadeIn().css({
                'width': Number(popWidth)
            })
                    .prepend('');
    Code :
    1
    2
    3
    4
           $('#' + popID).fadeIn().css({
                'width': Number(popWidth)
            })
                    .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

  12. #52
    Invité de passage
    Femme Profil pro
    Étudiant
    Inscrit en
    octobre 2011
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2011
    Messages : 15
    Points : 4
    Points
    4

    Par défaut

    Salut

    Je rejoins lvr pour sa remarque sauf que quand je vérifie le site avec le validateur, ça m'indique 2 erreurs:
    line 167 column 97 - Erreur: document type does not allow element "a" here
    line 180 column 34 - Erreur: document type does not allow element "div" here
    Je parle toujours du code source de la demo.

    Et puis concernant la méthode live utilisée vers la fin du code js, ça ne marche pas avec la nouvelle version de jQuery. J'ai dû charger la même version utilisé dans le tuto, à savoir: jQuery-1.4.1

  13. #53
    Responsable Développement Web

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

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

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 110
    Points
    83 110

    Par défaut

    Effectivement, le code jQuery de l'article n'est pas compatible avec les versions récentes de jQuery.
    D'autre part, les code HTML était sémantiquement faux.

    Une mise à jour de l'article a donc été faite passant l'exemple en HTML5 et rendant le code jQuery compatible avec les dernières versions.
    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

  14. #54
    lvr
    lvr est déconnecté
    Membre chevronné Avatar de lvr
    Inscrit en
    avril 2006
    Messages
    727
    Détails du profil
    Informations forums :
    Inscription : avril 2006
    Messages : 727
    Points : 622
    Points
    622

    Par défaut

    Excellente mise à jour !!!!


    J'ai voulu faire une petite adaptation de manière à pouvoir commander l'ouverture et la fermeture de la popup par programmation.

    Et là petit soucis.

    Exemple pour la fermeture:

    Dans mon fichier main.js principal :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    (function() {
     
        $('body').on('click', '#togglePage', function() {
            // 1) je ferme la popup
            closePopup();
            // 2) je fais le traitement
            var prevleftpage;
            var tmppage = pages.leftpagepanel().getPage();
            prevleftpage = new Page(tmppage.getIndex(), !tmppage.isDouble());
            pages.leftpagepanel().setPage(prevleftpage);
        });
    }());
    Dans mon fichier avec le js du popup
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    jQuery(function($) {
        //Lorsque vous cliquez sur un lien de la classe poplight
        // ...
        //Close Popups and Fade Layer
        $('body').on('click', 'a.close, #fade', function() {
            closePopup();
        });  //Au clic sur le body...
     
        function closePopup() {
            $('#fade , .popup_block').fadeOut(function() {
                $('#fade, a.close').remove();
            }); //...ils disparaissent ensemble
        }
    });
    L'appel du click du #togglePage ne retrouve pas closePopup().
    Je suppose qu'il doit avoir un problème de scope de définition de la fonction...

    Par contre la fermeture, via le bouton Close fonctionne.

  15. #55
    Responsable Développement Web

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

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

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 110
    Points
    83 110

    Par défaut

    Oui, c'est bien un problème de scope.
    Tes deux codes se trouvent dans deux closures différentes, du coup, les fonctions de l'une sont inaccessibles depuis l'autre.
    Regroupe ton code dans une seule closure et ça devrait mieux fonctionner.

    D'autre part, un petit détail par rapport à la notation
    là aussi, si tu utilises jQuery dedans, il est recommandé pour éviter tout conflit de transmettre l'objet jQuery :
    Code :
    (function($){...})(jQuery);
    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

  16. #56
    lvr
    lvr est déconnecté
    Membre chevronné Avatar de lvr
    Inscrit en
    avril 2006
    Messages
    727
    Détails du profil
    Informations forums :
    Inscription : avril 2006
    Messages : 727
    Points : 622
    Points
    622

    Par défaut

    Parfait. Merci.
    C'est juste moins lisible d'avoir tout dans un grand fichier que dans plusieurs petits.

  17. #57
    Invité de passage
    Inscrit en
    février 2013
    Messages
    1
    Détails du profil
    Informations forums :
    Inscription : février 2013
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Bonjour à tous,
    déjà merci pour ce tuto qui est super.

    Alors moi j'ai mis un formulaire d'inscription dans ma fenêtre et j'aimerais savoir comment afficher les messages d'erreur des tests en javascript quand la personne remplie le formulaire. Je peux faire des alert() mais ce n'est pas très élégant, ça fait pop up sur pop up. j'aimerais savoir si c'est possible d'écrire dans la pop up.

    Merci pour votre aide


    edit: j'ai trouvé une solution : creer une <div id="erreur"> </div> avec rien dedans et dans la fonction javascript mettre document.getElementById('erreur').innerHTML = "Veuillez remplir correctement tous les champs *";

  18. #58
    Invité de passage
    Inscrit en
    février 2009
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 2
    Points : 2
    Points
    2

    Par défaut Petite amélioration

    Bon, j'ai voulu utiliser plusieurs popup et commander la fermeture de la popup ouverte en ouvrant une nouvelle.

    voici le bout de code à rajouter dans le jquery

    Code :
    1
    2
    3
    4
    5
    6
    //close pop up id
    $('a.popclose').on('click', function() {
    	var popID = $(this).data('close'); //Trouver la pop-up correspondante
    	$('#' + popID).fadeOut();
    	return false;
    });

    et rajouter data-close="id de la popup" dans le lien et
    popclose dans la class class=" popclose poplight"

    ex :
    Code html :
    <a href="#" data-width="450" data-rel="id popup2" data-close="id popup1" class="popclose poplight">mon texte</a>


    Bon et voici le code jquery complet après qqles modifs et bugs d'affichage trouvés:


    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
    jQuery(function($){
    	//Lorsque vous cliquez sur un lien de la classe poplight
    	$('a.poplight').on('click', function() {
    		var popID = $(this).data('rel'); //Trouver la pop-up correspondante
    		var popWidth = $(this).data('width'); //Trouver la largeur
     
    		//Faire apparaitre la pop-up et ajouter le bouton de fermeture
    		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close'+popID+'"><img src="/scripts/jquery/popuplight/close_pop.png" class="btn_close"/></a>');
     
    		//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
    		var popMargTop = ($('#' + popID).height() + 80) / 2;
    		var popMargLeft = ($('#' + popID).width() + 80) / 2;
     
    		//Apply Margin to Popup
    		$('#' + popID).css({ 
    			'margin-top' : -popMargTop,
    			'margin-left' : -popMargLeft
    		});
     
    		//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
    		$('body').append('<div id="fade"></div>');
    		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
     
    	//Close Popups and Fade Layer
    	$('body').on('click', 'a.close'+popID+', #fade', function() { //Au clic sur le body...
    		$('#fade , .popup_block').fadeOut(function() {
    			$('#fade, a.close'+popID+'').remove();  
    	}); //...ils disparaissent ensemble
     
     
    		return false;
    	});
    		return false;
    	});
     
    		//close pop up id
    	$('a.popclose').on('click', function() {
    		var popID = $(this).data('close');   //Trouver la pop-up correspondante
    		$('#' + popID).fadeOut(function() {
    			$('a.close'+popID+'').remove();  
    	});
     
    		return false;
    	});
     
    });



    Allez, bizzzzzzzzzz! ^^

  19. #59
    Invité de passage
    Femme Profil pro
    Inscrit en
    mars 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : mars 2013
    Messages : 1
    Points : 1
    Points
    1

    Par défaut Fermeture à l'aide d'un bouton

    Bonjour à toutes et à tous,

    tout d'abord merci pour ce petit tuto qui est bien utile pour une débutante comme moi.
    Tout fonctionne parfaitement mais je souhaiterais que la fenêtre se ferme seulement au clic sur l'image du bouton et non sur la fenêtre elle-même. J'ai bien vu ce message :"Si nous avions souhaité que seuls les clics sur les croix ferment les popups, alors nous aurions pu les encapsuler dans un élément commun et affecter la délégation sur cet élément." mais cela reste du chinois pour moi. Si une âme charitable voulait bien m'aider cela m'arrangerait beaucoup.
    Je vous souhaite une bonne journée!
    Ps: je suis restée sur la première version.

  20. #60
    Candidat au titre de Membre du Club
    Inscrit en
    novembre 2006
    Messages
    40
    Détails du profil
    Informations forums :
    Inscription : novembre 2006
    Messages : 40
    Points : 13
    Points
    13

    Par défaut

    Bonjour,

    J'ai créé le popup et il apparaît bien dans ma fenêtre mais comment fait-on pour que l'usager clique sur le X pour fermer le popup car présentement si je clique n'importe ou dans la fenêtre (sauf dans le popup) le popup se ferme.

    Merci de me réponsre.

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
  •