Transformer un prompt en boite modale
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:
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:
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:
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:
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:
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:
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:
1
2
| let question =
showModal2(question); |
et j'ai défini
Code:
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.
