Un lien dans une fenêtre popup qui reste dans le même popup?

**youssef.mayssem** · 15/04/2016, 12h20

Bonjour,

dans ma page web, j'ai un lien 'A' que s'ouvre dans un popup, dans ce popup j'ai un lien 'B' que s'ouvre dans une page web.

Ma question; je veux que lien 'B' s'ouvre dans le même popup, comment puis-je faire sa?

ici le css et le jquery utilisé pour créer mon popup:

http://sohtanaka.developpez.com/tuto...css-et-jquery/

Merci

**01001111** · 17/04/2016, 18h00

tu as target="_self"
à mettre en attribut de l'anchor a

edit : oups pardon, il s'agit d'une fenêtre modale pas d'un popup... attends je réfléchis et je reviens.

edit 2: il faut que tu supprimes tu les contenus à l'exception de l'anchor .close

Code javascript :

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

 $("#popupX>:not(.close)").remove();//X étant le numéro du popup

et que tu mettes les contenus chargés via ajax en faisant:

Code javascript :

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

 $("#popupX").append(content);//X étant le numéro du popup

pour chercher les contenus ajax, la fonction jquery $.ajax fera l'affaire.
1. Attention: si tu as des scripts dans la fenêtre chargée il ne seront pas évalués il me semble, il faut utiliser d'autres méthodes pour ça.
2. Attention encore, si les contenus chargés sont plus hauts ou larges que la fenêtre modale, il faudra soit les adapter, soit mettre dans un div avec overflow:scroll

**youssef.mayssem** · 18/04/2016, 11h22

Bonjour,

sa n'a pas fonctionné, je ne sais pas si vous voyer un exemple de mon code, sa peut être aider! le bouton vers youtube dans le popup amène toujours vers une autre page?

merci d'avance!

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
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
127
128
129
130
 
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
 
<head>
 
 	<title>Design your own shirt: Marks &amp; Spencer MadetoMeasure</title>
 
<style>
#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
 
    //Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
        var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
 
        //Récupérer les variables depuis le lien
        var query = popURL.split('?');
        var dim = query[1].split('&amp;');
        var popWidth = dim[0].split('=')[1]; //La première valeur du lien
 
        //Faire apparaitre la pop-up et ajouter le bouton de fermeture
        $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
	.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></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;
 
        //On affecte le margin
        $('#' + popID).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });
 
        //Effet fade-in du fond opaque
        $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
        //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
        $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();
 
        return false;
    });
 
    //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;
    });
    });
</script>
 
 
</head>
<body >
 
<a href="#?w=500" rel="popup_name" class="poplight">My Size</a>
 
 
 
 
 
 
<div id="popup_name" class="popup_block">
	<h2>size predector</h2>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<a href="https://www.youtube.com/">click here</a>
</div>
 
 
 
 
</body>
 
 
 
</html>

**01001111** · 18/04/2016, 13h43

Bonjour, donc si vous voulez charger youtube ou un site externe, la méthode que je vous ai dit n'est pas applicable, ce n'est applicable décemment que pour une page annexe sur le même site.
Dans ce cas, il faut passer par une iframe:

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
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
 
<head>
 
 	<title>Design your own shirt: Marks &amp; Spencer MadetoMeasure</title>
 
<style>
#fade { /*--Masque opaque noir de fond--*/
        display: none; /*--masqué par défaut--*/
        background: #000;
        position: fixed; left: 0; top: 0;
        width: 100%; height: 100%;
        opacity: .80;
        z-index: 9999;
}
.popup_block{
        display: none; /*--masqué par défaut--*/
        background: #fff;
        padding: 20px;
        border: 20px solid #ddd;
        float: left;
        font-size: 1.2em;
        position: fixed;
        top: 50%; left: 50%;
        z-index: 99999;
        /*--Les différentes définitions de Box Shadow en CSS3--*/
        -webkit-box-shadow: 0px 0px 20px #000;
        -moz-box-shadow: 0px 0px 20px #000;
        box-shadow: 0px 0px 20px #000;
        /*--Coins arrondis en CSS3--*/
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
}
img.btn_close {
        float: right;
        margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
 
    //Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
        var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
 
        //Récupérer les variables depuis le lien
        var query = popURL.split('?');
        var dim = query[1].split('&amp;');
        var popWidth = dim[0].split('=')[1]; //La première valeur du lien
 
        //Faire apparaitre la pop-up et ajouter le bouton de fermeture
        $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
        .prepend('<a href="#" class="close" style="z-index:2;"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></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;
 
        //On affecte le margin
        $('#' + popID).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });
 
        //Effet fade-in du fond opaque
        $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
        //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
        $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();
 
        return false;
    });
 
    //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;
    });
});
function openingLinkInIframe(event, href, popup) {
    event.preventDefault();// important permet d'éviter l'ouverture directe du lien
    $("#"+popup+">:not(.close)").remove();
    var content='<iframe src="'+href+'" frameborder="0" scrolling="yes" style="z-index:1; position:absolute; display:block; width:100%; height:100%; left:0%; top:0%;"></iframe>';
    $("#"+popup).append(content);
}    
</script>
 
 
</head>
<body >
 
<a href="#?w=500" rel="popup_name" class="poplight">My Size</a>
 
 
 
 
 
 
<div id="popup_name" class="popup_block">
	<h2>size predector</h2>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<a href="https://www.youtube.com/" onclick="function(event) { openingLinkInIframe(event, this.href, 'popup_name'); }">click here</a>
</div>

**youssef.mayssem** · 18/04/2016, 13h58

merci beaucoup pour la réponse, j'ai pensé que la même chose pour un site externe le contraire.

mais mon vrai code, contient un popup (popup_name) qui contient le second popup (popup_second), je vais quand je clique sur 'click here' le contenu de popup_second se charge dans le popup et pas dans une fenêtre normale qui est le cas maintenant.

Désolé pour n'est pas être claire dès le début!

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
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
127
128
129
130
131
132
133
134
135
136
137
138
 
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
 
<head>
 
 	<title>Design your own shirt: Marks &amp; Spencer MadetoMeasure</title>
 
<style>
#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
 
    //Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
        var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
 
        //Récupérer les variables depuis le lien
        var query = popURL.split('?');
        var dim = query[1].split('&amp;');
        var popWidth = dim[0].split('=')[1]; //La première valeur du lien
 
        //Faire apparaitre la pop-up et ajouter le bouton de fermeture
        $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
	.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></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;
 
        //On affecte le margin
        $('#' + popID).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });
 
        //Effet fade-in du fond opaque
        $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
        //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
        $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();
 
        return false;
    });
 
    //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;
    });
    $("#popup_name>:not(.close)").remove();
    $("#popup_name").append(content);
    });
</script>
 
 
</head>
<body >
 
<a href="#?w=500" rel="popup_name" class="poplight">My Size</a>
 
 
 
 
 
 
<div id="popup_name" class="popup_block">
	<h2>size predector</h2>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<a href="second_popup">click here</a>
	<div id="popup_second">
	  <p>le texte de second popup</p>
	  <p>le texte de second popup</p>
	  <p>le texte de second popup</p>
	  <p>le texte de second popup</p>
	</div>
</div>
 
 
 
 
</body>
 
 
 
</html>

**01001111** · 19/04/2016, 08h21

il faut déjà reproduire l'attribut rel="popname" et le class="poplight" pour commencer, sinon le popup n'arrivera pas à être lancé.
ensuite il faut absolument que vous essayiez de bien comprendre comment fonctionne tout ce langage sinon vous n'arriverez à pas grand chose.

enlevez

Code :

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

1
2
$("#popup_name>:not(.close)").remove();
    $("#popup_name").append(content);

car vous ne les mettez pas au bon endroit.

une chose, vous avez choisi un exemple pour lequel il est difficile de remplacer les contenus de popup par d'autres car les contenus sont en place de base, alors soit vous fermez le popup ouvert sur ouverture d'un second popup, soit vous remplacez les contenus avec la fonction jquery $(/*selecteur*/).html(chaineHtml), soit vous basculez le display en none sur le contenu ouvert et vous basculez le contenu à ouvrir en display:block.

Plusieurs options s'offrent à vous, mais il faut que vous appreniez comment maitriser la logique de ce langage, ainsi que la librairie jquery

Un lien dans une fenêtre popup qui reste dans le même popup?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager