Discussion :

[what_else]

Salut à tous,

En me baladant sur internet, je suis tombé sur cette source que je trouve vraiment très sympa, tout particulièrement celui là. J'ai alors décidé de l'intégrer dans mon site web. Le problème, c'est que j’aurais besoin de mettre six fois le bouton "open dialog" sur la même page (qui ouvre les mêmes fenêtre mais avec un contenu différent) et le script ne semble pas le digérer. En effet, seul le premier fonctionne. Je pense savoir d'où vient le problème, mais je ne sais pas comment y remédier...

Code :

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

1
2
3
4
5
6
(function() {
    var dlgtrigger = document.querySelector( '[data-dialog]' ),
    somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
    dlg = new DialogFx( somedialog );
    dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
})();

Je pense que c'est la première ligne qui sélectionne le premier élément data-dialog qu'elle trouve et du coup ne prends pas en compte les suivants...
Voilà un code simplifié de ce que je voudrais faire :

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
<div class="boite1">
   <!-- BOITE 1 -->
   <div class="container">
      <div class="content">
         <div id="somedialog_1" class="dialog">
            <div class="dialog__overlay"></div>
            <div class="dialog__content">
               <div class="morph-shape">
                  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="none">
                     <rect x="3" y="3" fill="none" width="556" height="276"/>
                  </svg>
               </div>
               <div class="dialog-inner">
                  <!-- ICI LE CONTENU DE LA BOITE DE DIALOGUE -->
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- FIN BOITE 1 -->
</div>
<div class="boite2">
   <!-- BOITE 2 -->
   <div class="container">
      <div class="content">
         <div id="somedialog_2" class="dialog">
            <div class="dialog__overlay"></div>
            <div class="dialog__content">
               <div class="morph-shape">
                  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="none">
                     <rect x="3" y="3" fill="none" width="556" height="276"/>
                  </svg>
               </div>
               <div class="dialog-inner">
                  <!-- ICI LE CONTENU DE LA BOITE DE DIALOGUE -->
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- FIN BOITE 2 -->
</div>
<!-- BOUTONS POUR OUVRIR LES BOITES -->
<a data-dialog="somedialog_2">Ouvrir boite 1</a>
<a data-dialog="somedialog_1">Ouvrir boite 2</a>

Si quelqu'un pouvait prendre le temps de télécharger la source et m'aider à rendre le script dynamique, je lui en serait infiniment reconnaissant ! Merci beaucoup d'avance !

[what_else]

Bon après des centaines de tentatives, j'ai enfin réussi à faire un script qui fonctionne.
Bien que cela ne semble pas déferler la chronique par ici, je poste tout de même le script. On sait jamais ça pourrait intéresser quelqu'un.

Code :

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

1
2
3
4
5
6
7
8
9
(function(){
	var dlgTrigger = document.querySelectorAll('[data-dialog]');
	var someDialog, dlg;
	for (i = 0; i < dlgTrigger.length; i++){
		someDialog = document.getElementById( dlgTrigger[i].getAttribute( 'data-dialog' ) );
		dlg	= new DialogFx(someDialog);
		dlgTrigger[i].addEventListener( 'click', dlg.toggle.bind(dlg) );
		}
})();

[Bovino]

Code :

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

1
2
<a data-dialog="somedialog_2">Ouvrir boite 1</a>
<a data-dialog="somedialog_1">Ouvrir boite 2</a>