Bonjour,

je créé un jeu dans lequel le joueur doit trouver des éléments sur une image.
Pour répondre, il écrit sa réponse.
Pour cela, j'ai utilisé un prompt.
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
  const result = prompt("Entre le nom du jeu :" , "");

J'aimerais qu'il prenne la même forme que la boite de dialogue déjà mis en place :

Dans le css, j'ai mis exactement tes choix (je veux d'abord comprendre comment afficher avant de modifier les paramètres):
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
/*CSS boite de dialogue*/
dialog {position: fixed;top: 40%;left: 50%;margin: 0;padding: 1em 2em 0;min-width: 20em;border: 2px solid #1A4;text-align: center;box-shadow: 0 0 0.5em #000;transform: translate(-50%, -50%);}
dialog button {margin: .5em 0 .5em;padding: .5em 2em;border: 0;border-radius: 4px;text-shadow: none;font-size: inherit;outline-color: #6F9;outline-offset: 2px;color: #FFF;background-color: #1A4;background-image: none;box-shadow: 0 0 1em #888;transition: none;cursor: pointer;}
dialog button:not(:disabled):hover {color: #FFF;background-position: 0;}
dialog button:focus-within {outline: 2px solid #6F9;}

Dans le html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
/*Boite de dialogue*/
 
<dialog id="modal-info">
    <p class="modal-header">Vous avez cliqué sur :</p>
    <p class="modal-content"></p>
    <p class="modal-footer"><button data-role="close">Fermer</button></p>
  </dialog>


et dans le script,
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
if (result === elClicked["dataset"]["id"]) {
 
    const msg = "Bravo, c'était bien "+ elClicked["dataset"]["id"];
  showModal(msg);

- et enfin la définition de la fonction d'affichage
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
/*Création de la boite de dialogue*/
function showModal(html) {
  modal.querySelector(".modal-content").innerHTML = html;
  modal.showModal();
};
 
this.modal = document.getElementById("modal-info");
  const btnClose = modal.querySelector("[data-role='close']");
  btnClose.addEventListener("click", () => {
    modal.close();
  });

Je me demande, si je peux réutiliser la même boite de dialogue pour remplacer mon prompt en mettant input="text"Du coup, j'ai repris mes éléments comme ceci :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<dialog id="modal-question">
    <p class="modal-header2">Quelle est l'anecdote derrière cet élément ?</p>
    <p class="question2"></p>
    <p class="modal-footer"><button data-role="close">Fermer</button></p>
  </dialog>

Pour remplacer prompt("Entre le nom du jeu :" , "");, j'ai mis
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
  let question = 
showModal2(question);

et j'ai défini
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
/*Création de la boite de dialogue prompt*/
function showModal2(html) {
  <input class="question2" type="text" />
  modal.querySelector(".question2").innerHTML = html;
  modal.showModal2();
};
 
this.modal = document.getElementById("modal-question");
  const btnClose = modal.querySelector("[data-role='close']");
  btnClose.addEventListener("click", () => {
    modal.close();
  });

Evidemment, cela ne fonctionne pas, cela empêche même de cliquer dans les area ainsi que l'affichage des vies restantes.

Une idée de mon erreur?
Merci par avance.