5568 sujets

Sémantique web et HTML

Peut-on utiliser la balise <dialog> plus d'une fois ?

Bonjour à vous tous,

Je viens d'utiliser pour la première fois la balise <dialog> et je constate qu'elle fonctionne une première fois mais pas une seconde fois. En effet, on peut cliquer sur le mot Moteur", qui ouvre une fenêtre de dialogue, mais pas sur le mot juste en dessous "Esthétisme". J'ai l'impression que cette balise ne peut pas être utilisée plus d'une fois sur une même page web. Me le confirmez vous ?

Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Balise dialogue</title>
</head>

<body>
    <main>
        <section>
            <article>
                <div class="container_titre">
                    <h1 class="titre_principal">Ferrari</h1>
                </div>
                <div class="container_textes">
                    <p class="texte">
                        La première chose nous venant à l’esprit lorsque nous imaginons une Ferrari est sa vitesse. Cette vitesse est due à plusieurs éléments composant la Ferrari, notamment les caractéristiques techniques. Elles permettent aux voitures Ferrari de réaliser des performances incroyables et spécifiques aux voitures sportives de luxe de la marque au cheval cambré.
                    </p>
                    <h3 class="titre_tertiaire">
                        Caractéristiques
                    </h3>
                    <div class="attributs_universels">
                        <dialog id="myDialog" class="dialogue">
                            <h3 class="titre_attribut">Moteur</h3>
                            <p>
                                Les caractéristiques du moteur d’une Ferrari sont un moteur à cylindres (V12, V6, V8), à chevaux très puissants (jusqu’à 500/600 chevaux), avec des vitesses maximales incroyables (plus de 300 km/h) et une accélération 0-100 km en quelques secondes (2 à 3 secondes).
                            </p>
                            <button id="yesBtn">Fermer</button>
                        </dialog>
                        <button id="openDialogBtn" class="gras">Moteur</button>
                    </div>
                    <div class="attributs_universels">
                        <dialog id="myDialog" class="dialogue">
                            <h3 class="titre_attribut">Esthétisme</h3>
                            <p>
                                Les voitures Ferrari ont des caractéristiques esthétiques qui sont propres à elles. Elles peuvent être facilement reconnues à leur apparence en raisons d’éléments typiques de la marque italienne : des traits fins, raffinés, musclés, logo à cheval cambré. Il est très facile de reconnaître une Ferrari en raison de ces éléments.
                            </p>
                            <button id="yesBtn">Fermer</button>
                        </dialog>
                        <button id="openDialogBtn" class="gras">Eshétisme</button>
                    </div>
                </div>
            </article>
        </section>
    </main>
    <script src="dialogue.js"></script>
</body>

</html>

Voici le code CSS :
body {
  line-height: 1.3;
  background-color: #f7ebff;
  font-size: 1.1rem;
}

#myDialog{
  width: 50%;
}

.dialogue{
  background-color: #f7ebff;
  border: 3px solid #5f479f;
  padding: 1rem;
}

#openDialogBtn{
  margin-left: .5rem;
  width: 12rem;
  font-size: 1.5rem;
  border: none;
  background-color: #f7ebff;
  font-family: 'zilla_slablight';
  padding: 0;
  color: #5f479f;
  text-align: left;
}

.titre_attribut{
  margin-top: -5px;
  color: #5f479f;
}

.container_titre{
	width: 60%;
	margin: 0 auto;
	background-color: #5f479f;
    padding-bottom: 1rem;
}

.titre_principal{
    padding: 8rem 0 0 0;
    font-size: 3rem;
    font-family: 'zilla_slab_regularregular';
    margin-top: -1rem;
    text-align: center;
    color: #ddd;
    margin-bottom: 0;
}

.container_textes{
  width: 60%;
  margin: 0 auto;
  padding-bottom: 1rem;
}

.gras{
  font-weight: 900;
}

.titre_tertiaire{
  font-size: 2rem;
  color: #5f479f;
}

Et voici le code JavaScript pour la gestion de l'ouverture et de la fermeture de la fenêtre de dialogue :
// Récupération des éléments du DOM
var dialog = document.getElementById('myDialog');
var openBtn = document.getElementById('openDialogBtn');
var yesBtn = document.getElementById('yesBtn');
var noBtn = document.getElementById('noBtn');

// Ajout d'un écouteur d'événement pour ouvrir la boîte de dialogue
openBtn.addEventListener('click', function() {
dialog.show();
});

// Ajout d'écouteurs d'événements pour gérer la fermeture de la boîte de dialogue
yesBtn.addEventListener('click', function() {
// Code pour supprimer l'élément
dialog.close();
});

noBtn.addEventListener('click', function() {
dialog.close();
});

Je précise que je n'ai pas codé la partie JavaScript, je l'ai récupérée sur le web.

Merci pour votre aide
Modérateur
Salut,

j'ai déjà utilisé <dialog>. Toute la mécanique d'ouverture et fermeture était placée dans une class. Ce qui m'a facilité un peu la vie. Attention, c'est casse-gueule.

1. j'ai été obligé de placer un polyfill (à l'époque, ce n'était pas viable sur tous les navigateurs (de mémoire, les webkit et Safari posait un problème et j'ai dû rajouter patch pour que cela fonctionne)
2. De mémoire, dans mon <dialog>, j'avais intégré un <form>. Lorsque tu soumettais le <form> au clavier, dialog se fermait automatiquement
Je ne sais pas du tout ce qu'est une classe en développement. Je suppose que cela n'a rien à voir avec l'attribut class dans HTML ?
Modérateur
Bonjour,
ton soucis vient du fait que tu utilises deux fois le même ID (un seul par page est possible)
Ton script recherches aussi plusieurs id, la boite dialog , mais aussi les boutons. Il ne peut y avoir plusieurs éléments avec un ID identique.

Tu dois revoir ton code pour qu'il fonctionne à partir de class, ou (le temps de corriger) le dupliquer pour chaque boite qui auront des IDs similaires MAIS différents , en y ajoutant un chiffre par exemple...
Modifié par gcyrillus (08 Mar 2023 - 13:44)
Modérateur
ObiJuanKenobi a écrit :
Je ne sais pas du tout ce qu'est une classe en développement. Je suppose que cela n'a rien à voir avec l'attribut class dans HTML ?


C'est de la poo
Merci gcyrillus pour tes explications. En effet, j'utilisais plus d'une fois le même ID dans la même page web et cela ne pouvait pas fonctionner. Le pire c'est que je le savais mais je n'ai pas percuté en récupérant le bout de code JavaScript sur le web. J'ai modifié le code et maintenant ça marche, je peux utiliser plusieurs fenêtres modales générées par la balise <dialog> dans la même page web.

Mais maintenant j'ai un autre souci. J'ai lu, il y a quelques temps, qu'il ne faut pas faire du JS in line tout comme il ne faut pas faire du CSS in line. Cela fonctionne mais la pratique ne se fait pas. Est-ce que c'est vrai ?

Voilà mon nouveau code HTML pour illustrer ce que je dis :
<button onclick="document.getElementById('dialog1').showModal()" class="bouton_attribut">Ferrari</button>
<dialog id="dialog1" class="dialogue position_relative">
    <button onclick="document.getElementById('dialog1').close()" class="croix_fermeture position_absolute"><img
            src="../img/bouton_fermeture_dialogue.png"></button>
    <h3 class="titre_attribut">Ferrari</h3>
    <p>
        ...
    </p>
</dialog>
<span class="retour_a_la_ligne2 retrait attributs_universels">Sportive</span>


<button onclick="document.getElementById('dialog2').showModal()" class="bouton_attribut">Lambhorgini</button>
<dialog id="dialog2" class="dialogue">
    <h3 class="titre_attribut">Lambhorgini</h3>
    <p>
        ...
    </p>
    <button onclick="document.getElementById('dialog2').close()">Fermer</button>
</dialog>
<span class="retour_a_la_ligne2 retrait attributs_universels">Sportive de luxe</span>

<button onclick="document.getElementById('dialog3').showModal()" class="bouton_attribut">Porsche</button>
<dialog id="dialog3" class="dialogue">
    <h3 class="titre_attribut">Porsche</h3>
    <p>
        ...
    </p>
    <button onclick="document.getElementById('dialog3').close()">Fermer</button>
</dialog>
<span class="retour_a_la_ligne2 retrait attributs_universels">Sportive puissante</span>

Modifié par ObiJuanKenobi (10 Mar 2023 - 08:29)
Modérateur
Bonjour,

L'idée de séparer les codes des uns des autres est une bonne pratique.
Elle permet (entre autres) d'avoir un code:
- plus facile à lire,
- plus facile à maintenir
- et ne pas polluer le code d'un langage avec un autre,
- etc.

Ton premier code, utilise addEventListener() pour injecter ici tes onclick="" . Pour la personne qui s'occupe du HTML, il n'a pas à s'en soucier et Il peut dupliquer des portions de structure HTML. Souvent, c'est un script qui génère les données en fonctions de ce qu'il doit afficher, trouve.

Pour garder le js à partet pour ne pas injecter les attributs onclick à l'edition ou via un script serveur, et donc garder un code HTML clair. Il faudra laisser la page se charger et faire une boucle sur ces éléments pour y ajouter un écouteur d’événement pour lancer une fonction.

En reprenant ton code du début du sujet et en omettant tes ids, on peut boucler sur tes boutons qui ne font rien d'autre que d'ouvrir ou fermer ton dialog.

Voici un exemple qui permet de réduire le javascript sans polluer ton HTML et d'ajouter autant de block attributs_universels que tu veut .(a lire avec critique, je ne suis pas un dev!, je suis cuisinier).
//boucle sur les boutons de la boite attributs_universels
for (let e of document.querySelectorAll(".attributs_universels button")) {
  e.addEventListener("click", function () {
    toggleDialogStatut(e);
  });
}
function toggleDialogStatut(el) { // recherche et verifie l'etat de dialog et l'inverse
  let parent = el.closest(".attributs_universels");
  let diag = parent.querySelector("dialog");
  if (diag.open) {
    diag.close();
  } else {
    diag.showModal();
  }
}


démo en ligne pour jouer avec : https://codepen.io/gc-nomade/pen/JjaMjrv?editors=1010
Modifié par gcyrillus (10 Mar 2023 - 10:50)
Meilleure solution
Merci gcyrillus mais c'est compliqué pour moi à comprendre le JavaScript. Je ne suis pas aussi à l'aise avec ce langage qu'avec le HTML. J'ai déjà eu du mal à faire ma version pour éviter la répétition des ID identiques, et si maintenant tu me dis que je dois boucler sur un écouteur d'événements pour lancer les éléments, c'est compliqué. Mais merci pour tes explications que j'ai compris.

Cependant, est-ce que c'est vrai qu'il faut éviter de coder le JS in line tout comme le CSS in line ?
Modifié par ObiJuanKenobi (10 Mar 2023 - 11:46)
Modérateur
ObiJuanKenobi a écrit :

Cependant, est-ce que c'est vrai qu'il faut éviter de coder le JS in line tout comme le CSS in line ?


Cela est surtout une évidence au fil du temps. Après, tout dépend de la maitrise de chacun de ces langages à faire cohabiter qui vont te permettre de mettre en pratique ce principe au moment de poser les premières lignes de codes Smiley cligne .
Cdt
Modifié par gcyrillus (10 Mar 2023 - 12:08)
Prévenir un modérateur
Répondre au sujet
Aller à