Participer au site avec un Tip
Rechercher
 
Bug Suggérer des Améliorations / Corrections
Share Partager sur Facebook Partager sur Twitter
Links Notre chaîne YouTube Notre discord

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

Ouvrir une boîte de dialogue modale en HTML

Accès rapide :
Introduction
L'exemple de code

Introduction

Le tag HTML <dialog> est utilisé pour créer une boîte de dialogue modale dans une page web. Il s'agit d'un élément qui affiche un contenu interactif au-dessus du reste du contenu de la page, et qui bloque l'interaction avec le reste de la page tant que la boîte de dialogue est ouverte.

A titre d'exemple, vous pouvez cliquez sur le bouton ci-dessous pour ouvrir une telle boîte de dialogue.

Koor.fr Dialog demonstration

L'exemple de code

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 

<!DOCTYPE html>
<html>
    <head>
        <title>Test d'une boite de dialogue en HTML</title>
        <style>
            #myDialog {
                border: 2px solid gray;
                border-radius: 20px;
            }
        </style>
    </head>
    <body>
        <dialog id="myDialog">
            <p>Koor.fr Dialog demonstration</p>
            
            <form method="dialog">
                <button>Close the dialog</button>
            </form>
        </dialog>

        <h1>Test d'une boite de dialogue en HTML</h1>
        
        <button onclick="myDialog.showModal();">Open dialog box</button>
    </body>
</html>
Exemple d'ouverture d'une boîte de dialogue modale en HTML