Discussion :

[spike2]

Bonjour,

J'ai récupéré un morceau de code sur le site JQuery pour faire une petite boîte Modal, pour afficher trois informations.

Ok ça fonctionne, seulement j'aimerai répéter le code plusieurs fois dans la page, et je n'arrive pas à trouver ce qu'il faut écrire.

Voici le code

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
$.fx.speeds._default = 100;
    $(function() {
        $('.dialog').dialog({
            autoOpen: false,
            show: 'blind',
            hide: 'clip',
            draggable: false,
            modal: true,
            minHeight: 300,
            maxWidth: 400,
            resizable: false
        });
 
        $('.opener').click(function() {
            $('.dialog').dialog('open');
            return false;
        });
    });

Et la où je l'utilise, dans une boucle :

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
<div class="direction">
                    <p><span>En direction: </span><?php echo $camps->getCentreAnimateur() ?></p>
                    <a href="" class="opener">
                        <img alt="Voir profil" src="/uploads/personnel/<?php echo $camps->getCentreAnimateur()->getPhotos() ?>">
                    </a>
 
                    <div class="dialog" title="<?php echo $camps->getCentreAnimateur() ?>">
                        <div class="animphoto">
                            <img alt="<?php echo $camps->getCentreAnimateur() ?>" src="/uploads/personnel/<?php echo $camps->getCentreAnimateur()->getPhotos() ?>">
                        </div>
 
                        <div class="anim">
                            <p>Nom: <?php echo $camps->getCentreAnimateur() ?></p>
                            <p>Age: <?php echo $camps->getCentreAnimateur()->getSonAge() ?> ans</p>
                            <p>Sexe: <?php echo $camps->getCentreAnimateur()->getSexe() ?> </p>
                        </div>
 
                        <div class="clearer"></div>
                    </div>

Le problème quand je clic sur mon lien ça m'ouvre plusieurs boîtes, ce qui a l'air normal vu le code.

Comment faire en sorte d'ouvrir seulement le div suivant appelé .dialog ?

J'ai essayé avec $('.opener').next().dialog('open') mais ça ne fait rien.
Ni avec

Code :

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

1
2
$('.opener').click(function() {
            $('div').children('.dialog').dialog('open');

qui m'ouvre aussi toutes les boîtes de dialogues...

Ca doit être bête comme réponse j'imagine, merci d'avance

[danielhagnoul]

Bonsoir.

Avec plusieurs couples a.opener/div.dialog la seule solution est :

Code :

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

1
2
3
4
$('.opener').click(function() {
	$(this).next().dialog('open');
	return false;
});

[spike2]

Bonjour,

Merci de la réponse, mais ça ne fonctionne pas, car le code de la boîte de dialogue est cachée, il n'y a rien dans le code source où pourrait pointer le (this).next()

Donc j'ai utilisé la méthode toggle pour pouvoir accéder à mes éléments:

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
 
<script type="text/javascript">
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 100;
    $(function() {
        $('.dialog').toggle();
        $('.opener').click(function() {
            $(this).parent().children('.dialog').dialog({
                show: 'blind',
                hide: 'clip',
                draggable: false,
                modal: true,
                minHeight: 300,
                maxWidth: 400,
                resizable: false
            });
            return false;
        })
 
    });
    </script>