Fenêtres modales récursives
Bonjour,
J'ai besoin pour un projet de faire un petit système de popup modales (qui se mettent au 1er plan et qui empêchent l'utilisateur d’accéder à ce qui est en arrière plan) et récursive. Comme ça fait un moment qu'on me parle de jquery, je me suis dit aller hop, j'essaye de faire avec !
Soyez donc indulgent envers quelqu'un qui s'y est mis voilà tout juste quelques heures.
J'en reviens à mon problème. Mes 1er essais donnent quelque chose de sympa (merci à l'auteur de ce petit tuto), mais l'aspect "récursif" ne marche absolument pas...
je met des guillemet autour de récursif car dans mon implémentation, ça ne l'est pas vraiment. Je fait juste un affichage de popup les nes par dessus les autres.
Les CSS :
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
| div.popupbg{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
filter: alpha(opacity=80);
}
div.divpopup {
display: none;
background: #fff;
padding: 20px;
border: 10px solid #d0d0d0;
float: left;
position: fixed;
top: 50%; left: 50%;
box-shadow: 0px 0px 10px #000;
border-radius: 10px;
}
img.close_button {
float: right;
margin: -55px -55px 0 0;
}
a.popup{
color:#F00;
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<meta charset="utf-8">
<head>
<script language="javascript" type="text/javascript" src="./js/jquery-2.1.1.js"></script>
</head>
<body>
<a data-width="200" href="#" class="popup" >mon lien</a>
<div style="position:absolute;z-index:2000;"><a data-width="200" href="#" class="popup" >mon nouveau lien</a></div>
</body>
</html>
<script language="javascript"> |
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
| var z_level = 1000;
var id_item = 1;
$(function(){
$('a.popup').on('click', function() {
z_level += 10;
var current_id = "item" + ++id_item;
//alert(current_id);
$('<div/>') .attr('class', 'popupbg')
.attr('z-index', z_level)
.attr('id', current_id + "popupbg")
.html('')
.appendTo($('body'))
;
$('<div/>') .attr('class', 'divpopup')
.attr('id', current_id )
.attr('z-index', z_level + 1)
.html('')
.appendTo($('body'));
$('<img/>')
.css('cursor', 'pointer')
.attr('src', './img/close.gif')
.attr('class', 'close_button')
.on('click', function(event) {
return function(item_id){
$('#'+item_id).fadeOut(100, function() {$('#'+item_id).remove();});
$('#'+item_id + "popupbg").fadeOut(100, function() {$('#'+item_id + "popupbg").remove();});
}(current_id);
})
.prependTo($('#'+current_id));
$('div#'+current_id).fadeIn(250).css({'width':Number($(this).data('width'))});
$('div#'+current_id + "popupbg").fadeIn(250)
// 1er essai
//$('div#'+current_id).append('<a data-width="300" href="#" class="popup" >lien semi statique : '+current_id+'</a>')
// 2eme essai
//$('<a/>').attr('href', '#').attr('class', 'popup').attr('data-width', '400').html('lien dynamique').appendTo($('div#'+current_id));
});
}); |
Pour vous épargner le plus possible la séance de déchiffrage du code, le principe est simplement lorsque l'on clique sur un lien de class a.popup de créer une 1er div fixe grisée qui recouvre la page, et de mettre par dessus une div qui correspond à la popup.
A chaque nouvelle fenetre ouverte, les ID et le Z-index sont générés dynamiquement (et séquentiellement) grâce à des variables globales.
Seulement voilà, tant que les liens existent sur la page principales, pas de problèmes, ça marche et je peux ouvrir autant de popup que je veux les unes par dessus les autres ("mon nouveau lien" qui reste au 1er plan permet de tester ce principe).
En revanche, quand je génère dynamiquement une nouvelle balise a de même class à l'intérieur de la popup créée... bha ça ne marche pas...
J'avais d'abord tenter d'ajouter le nouveau lien à l'intérieur de la popup créé avec la méthode append() de jquery (1er essai commenté dans le code). Le lien est bien la, mais il ne se passe rien quand je clique dessus. J'ai supposé que append devait faire un genre de innerHTML et que peut être que jquery n'avait alors pas connaissance de l'existance de l'objet <a> créé, et j'ai donc tenté une 2ème méthode plus dynamique (2eme essai commenté dans le code)... mais pas mieux...
Bref, je suis un peu bloqué car j'ai bien l'impression que jquery ne fonctionne pas sur les balises créées dynamiquement, et ça me parait gros pour que ça soit le cas...
Y aurait-il donc une ame charitable qui y voit plus clair que moi et qui puisse me mettre sur la voix pour résoudre ce problème ?
En vous remerciant !
EDIT :
J'ai une pseudo-solution qui consiste à transformer ma fonction anonyme en une fonction classique MkPopup() et a ré associer manuellement l’événement avec .on('click', MkPopup) à chaque balise <a> créées dynamiquement... La solution ne me satisfait que moyennement, mais tend à confirmer ma dernière hypothèse. Des avis ?
