Notes perso: HTML Dialog | 12 Days of Web
mardi 5 décembre 2023 à 14:58Notes rapides sur la balise <dialog>
et le JS .showModal(), .close()
On crée la boîte de dialogue en HTML/CSS
<dialog id="modal-dialog">
<div class="dialog-content">
<h3>Title</h3>
<p>Question ?</p>
<ul class="dialog-actions">
<li><button type="button" data-action="confirm">Yes</button></li>
<li><button type="button" data-action="cancel">Cancel</button></li>
</ul>
</div>
</dialog>
On crée le JS adapté
En gros on récupère le click sur l'objet document et on le traite en fonction de l'action prévue dans l'attribut data-action
const dialog = document.getElementById("modal-dialog"");
document.addEventListener("click", ({ target }) => {
// ... show logic
// ... close logic
if (target.matches('[data-action="confirm"]')) {
// action si confirm
}
if (target.matches('[data-action="cancel"]')) {
// action si cancel
dialog.close();
}
});
<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/>
<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/>
<script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js">
<script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});► Commentaires