2 pop-up sur la même page jQuery

**Softarg** · 26/05/2022, 11h48

Bonjour à tous,

Mon objectif est d'avoir plusieurs pop-up différentes sur la même page.
Ce que j'ai en codage, m'ouvre la 1ère pop-up mais n'a aucune action pour la deuxième.
J'ai vraiment tenté beaucoup de choses mais en vain.
Si je mets un href différent pour chaque pop-up par exemple, pas d'effet !

Pouvez-vous si cela ne vous prendre pas trop de temps essayer de m'aider.

Merci d'avance.

Voici les codes que j'ai centralisés sur une même page pour cette demande :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!doctype html>
<html lang="fr">
<head>
<title>test pop up</title>
<meta charset="utf-8">
<meta name="robots" content="noindex"/>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" target="_blank">https://cdnjs.cloudflare.com/ajax/li.../jquery.min.js</a>"></script>
<script src="main.js"></script>
<style type="text/css">
body {
background-color: #CCC;
font-family: 'Oswald', sans-serif;
color: #000;
}
#advert-once {
position: fixed;
width: 700px;
bottom: 20px;
right: 20px;
left: 20px;
top: 20px;
display: none;
margin: auto;
background-color:#FFF;
 
-webkit-background-size: cover;
background-size: cover;
padding: 20px;
z-index: 99999;
}
#advert-once .advert-button {
    position: absolute;
    width: 10px;
    height: 10px;
    font-size: 14px;
    line-height: 12px;
    right: -6px;
    top: -7px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
}
 
#reset-session, #refresh-page {
display: block;
width: 250px;
text-align: center;
font-family: 'Oswald', sans-serif;
border-radius: 5px;
border: none;
padding: 2px 5px;
cursor: pointer;
background-color: #ddd;
margin: 5px 0;
}
 
#reset-session:hover, #refresh-page:hover {
background-color: #f96e5b;
}
@media only screen and (max-width: 600px) {
#advert-once {
width: 90%;
height: 400px;
-webkit-background-size: 215%;
background-size: 215%;
}
}
    </style>
</head>
 
<!--POP UP 1   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°-->
<div>
    <a style="background-color: white;color: black;padding: 10px 15px;display: inline-block;" href="javascript:void(0)" id="click">Lire son mail</a>
        <div id="advert-once">
               Cette pop-up marche, elle s'affiche.
            <div class="advert-button">X</div>
        </div>
</div>
<!--FIN POP UP   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°--><br><br><br><br>
 
 
<!--POP UP 2   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°-->
<div>
    <a style="background-color: white;color: black;padding: 10px 15px;display: inline-block;" href="javascript:void(0)" id="click">Compte rendu</a>
        <div id="advert-once">
Celle-ci non !
 
            <div class="advert-button">X</div>
        </div>
</div><br /><br />
 
 
 
</body>
</html><br><br>

Et pour le js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
Query(document).ready(function($){  
$('#click').on('click',function(){
$('#advert-once').delay(1000).fadeIn();
});
 
$('#advert-once .advert-button').on('click',function(){
$('#advert-once').fadeOut();
});
$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        $('#advert-once').fadeOut();
    }
});
$(document).click(function(event) {
  //if you click on anything except the modal itself or the "open modal" link, close the modal
  if (!$(event.target).closest("#advert-once").length && !$(event.target).closest("#click").length) {
    $("body").find("#advert-once").fadeOut();
  }
});
 
$('#reset-session').on('click',function(){
sessionStorage.setItem('advertOnce','');
});
 
});

**mathieu** · 26/05/2022, 14h07

je n'ai pas lu tout votre code mais déjà je vois que vous avez plusieurs balises html avec le même "id". un identifiant doit être unique sur toute la page.

**ASCIIDEFOND** · 26/05/2022, 23h16

Bonsoir à tous,

Comme le signalait Mathieu, problème de doublon sur les noms des ID.
Un exemple sans l’utilisation d’ID.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<style type="text/css">
    body {
        background-color: #CCC;
        font-family: 'Oswald', sans-serif;
        color: #000;
    }
 
    a {
        cursor: pointer;
    }
 
    .advert-once {
        position: fixed;
        width: 700px;
        bottom: 20px;
        right: 20px;
        left: 20px;
        top: 20px;
        display: none;
        margin: auto;
        background-color: #FFF;
        -webkit-background-size: cover;
        background-size: cover;
        padding: 20px;
        z-index: 2;
    }
 
    .masque {
        background-color: rgba(9, 113, 210, 0.5);
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: none;
        z-index: 1;
    }
 
    .advert-button {
        position: relative;
        width: 18px;
        height: 18px;
        float: right;
        background-color: red;
        color: white;
        border-radius: 50%;
        cursor: pointer;
        top: -29px;
        right: -29px;
        font-weight: bold;
        text-align: center;
    }
 
    #reset-session,
    #refresh-page {
        display: block;
        width: 250px;
        text-align: center;
        font-family: 'Oswald', sans-serif;
        border-radius: 5px;
        border: none;
        padding: 2px 5px;
        cursor: pointer;
        background-color: #ddd;
        margin: 5px 0;
    }
 
    #reset-session:hover,
    #refresh-page:hover {
        background-color: #f96e5b;
    }
 
    @media only screen and (max-width: 600px) {
        #advert-once {
            width: 90%;
            height: 400px;
            -webkit-background-size: 215%;
            background-size: 215%;
        }
    }
</style>
</head>
 
<body>
    <div class="masque"></div>
    <!--POP UP 1   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°-->
    <div>
        <a style="background-color: white;color: black;padding: 10px 15px;display: inline-block;">Lire son mail</a>
        <div class="advert-once">
            Cette pop-up marche, elle s'affiche.
            <div class="advert-button">X</div>
        </div>
    </div>
    <!--FIN POP UP   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°--><br><br><br><br>
 
 
    <!--POP UP 2   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°-->
    <div>
        <a style="background-color: white;color: black;padding: 10px 15px;display: inline-block;">Compte rendu</a>
        <div class="advert-once">
            Celle-ci aussi s'affiche à présent ;) !
            <div class="advert-button">X</div>
        </div>
    </div><br /><br />
</body>

Code JQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
(function ($) {
 
    $('a').on('click', function () {
        $('div.masque').fadeIn();
        $(this).nextAll('.advert-once:first').delay(1000).fadeIn();
    });
 
   $(document).on('click keydown', '*', function (e) {
       if ($(this).hasClass('masque') || $(this).hasClass('advert-button') || e.key === 'Escape') {
           if ($('.advert-once').is(':visible')) {
               $('.advert-once').fadeOut();
               $('.masque').fadeOut();
           }
       }
   });
 
    $('#reset-session').on('click', function () {
        sessionStorage.setItem('advertOnce', '');
    });
 
})(jQuery);

**Toufik83** · 27/05/2022, 00h04

Bonjour,

Je rajoutes qu'on peut modifier la ligne de la condition suivante if($(this).css('display') != 'none') et utiliser $.is() avec le sélecteur :visible :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if($(this).css('display') != 'none') 
//est équivalente à 
if($(this).is(':visible'))

**ASCIIDEFOND** · 27/05/2022, 10h36

Bonjour à tous,

Envoyé par Toufik83

Bonjour,
Je rajoutes qu'on peut modifier la ligne de la condition suivante if($(this).css('display') != 'none') et utiliser $.is() avec le sélecteur :visible :

Effectivement c’est plus simple et compréhensible, merci.

J’en ai aussi profité pour simplifier le déclenchement des 'fadeOut()' et les conditions.

**Softarg** · 27/05/2022, 13h02

Tout d'abord merci à vous tous pour l'aide apportée.
J'ai crée deux fichiers :index.html et js.js.
Je ne vois pas ce que je ne comprends pas !
Pouvez-vous encore y jeter un oeil ?
Merci.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html lang="fr">
<head>
<title>test pop up</title>
<meta charset="utf-8">
<meta name="robots" content="noindex"/>
<script src="js.js"></script>
 
<style type="text/css">
    body {
        background-color: #CCC;
        font-family: 'Oswald', sans-serif;
        color: #000;
    }
 
    a {
        cursor: pointer;
    }
 
    .advert-once {
        position: fixed;
        width: 700px;
        bottom: 20px;
        right: 20px;
        left: 20px;
        top: 20px;
        display: none;
        margin: auto;
        background-color: #FFF;
        -webkit-background-size: cover;
        background-size: cover;
        padding: 20px;
        z-index: 2;
    }
 
    .masque {
        background-color: rgba(9, 113, 210, 0.5);
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: none;
        z-index: 1;
    }
 
    .advert-button {
        position: relative;
        width: 18px;
        height: 18px;
        float: right;
        background-color: red;
        color: white;
        border-radius: 50%;
        cursor: pointer;
        top: -29px;
        right: -29px;
        font-weight: bold;
        text-align: center;
    }
 
    #reset-session,
    #refresh-page {
        display: block;
        width: 250px;
        text-align: center;
        font-family: 'Oswald', sans-serif;
        border-radius: 5px;
        border: none;
        padding: 2px 5px;
        cursor: pointer;
        background-color: #ddd;
        margin: 5px 0;
    }
 
    #reset-session:hover,
    #refresh-page:hover {
        background-color: #f96e5b;
    }
 
    @media only screen and (max-width: 600px) {
        #advert-once {
            width: 90%;
            height: 400px;
            -webkit-background-size: 215%;
            background-size: 215%;
        }
    }
</style>
</head>
 
<body>
    <div class="masque"></div>
    <!--POP UP 1   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°-->
    <div>
        <a style="background-color: white;color: black;padding: 10px 15px;display: inline-block;">Lire son mail</a>
        <div class="advert-once">
            Cette pop-up marche, elle s'affiche.
            <div class="advert-button">X</div>
        </div>
    </div>
    <!--FIN POP UP   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°--><br><br><br><br>
 
 
    <!--POP UP 2   °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°-->
    <div>
        <a style="background-color: white;color: black;padding: 10px 15px;display: inline-block;">Compte rendu</a>
        <div class="advert-once">
            Celle-ci aussi s'affiche à présent ;) !
            <div class="advert-button">X</div>
        </div>
    </div><br /><br />
</body>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function ($) {
 
    $('a').on('click', function () {
        $('div.masque').fadeIn();
        $(this).nextAll('.advert-once:first').delay(1000).fadeIn();
    });
 
   $(document).on('click keydown', '*', function (e) {
       if ($(this).hasClass('masque') || $(this).hasClass('advert-button') || e.key === 'Escape') {
           if ($('.advert-once').is(':visible')) {
               $('.advert-once').fadeOut();
               $('.masque').fadeOut();
           }
       }
   });
 
    $('#reset-session').on('click', function () {
        sessionStorage.setItem('advertOnce', '');
    });
 
})(jQuery);

Merci.

**Toufik83** · 27/05/2022, 16h26

Bonjour,

Il faut charger jQuery avant le script js, et ouvrir l'outil de développement sous l'onglet console pour voir s'il y'a des erreurs...

2 pop-up sur la même page jQuery

jQuery

Discussions similaires

Partager

Partager