Crear ventanas modales con la etiqueta dialog de HTML

Introducción

En este laboratorio, aprenderá a usar la etiqueta HTML <dialog> para crear una ventana modal o un pop-up en una página web. Lo guiaremos a través del proceso paso a paso de crear una caja de diálogo de muestra con la ayuda de la etiqueta <dialog>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70742{{"Caja/ventana de diálogo HTML"}} html/head_elems -.-> lab-70742{{"Caja/ventana de diálogo HTML"}} html/layout -.-> lab-70742{{"Caja/ventana de diálogo HTML"}} html/doc_flow -.-> lab-70742{{"Caja/ventana de diálogo HTML"}} html/forms -.-> lab-70742{{"Caja/ventana de diálogo HTML"}} html/inter_elems -.-> lab-70742{{"Caja/ventana de diálogo HTML"}} end

Agregando la etiqueta dialog en index.html

La etiqueta <dialog> requiere una etiqueta de inicio y una etiqueta de cierre. En este paso, agregaremos la estructura básica de HTML y la etiqueta <dialog> al archivo index.html.

<!doctype html>
<html>
  <head>
    <title>Ventana Modal usando la etiqueta dialog de HTML</title>
  </head>
  <body>
    <h1>Ventana Modal usando la etiqueta dialog de HTML</h1>

    <!-- Agregando la etiqueta dialog -->
    <dialog>
      <p>Esta es una caja de diálogo de muestra!</p>
    </dialog>
  </body>
</html>

Agregando un botón para abrir el diálogo

En este paso, crearemos un botón para abrir la caja de diálogo. Usaremos JavaScript para abrir y cerrar la caja de diálogo cuando se haga clic en el botón.

<!doctype html>
<html>
  <head>
    <title>Ventana Modal usando la etiqueta dialog de HTML</title>
  </head>
  <body>
    <h1>Ventana Modal usando la etiqueta dialog de HTML</h1>

    <!-- Agregando la etiqueta dialog -->
    <dialog id="dialog">
      <p>Esta es una caja de diálogo de muestra!</p>
    </dialog>

    <!-- Agregando un botón para abrir el diálogo -->
    <button onclick="document.getElementById('dialog').showModal()">
      Abrir Diálogo
    </button>

    <!-- Agregando un botón para cerrar el diálogo, que está oculto por defecto  -->
    <button onclick="document.getElementById('dialog').close()">
      Cerrar Diálogo
    </button>
  </body>
</html>

Agregando estilo CSS al diálogo

En este paso, agregaremos un poco de estilo CSS a la caja de diálogo para que se vea más presentable.

<!doctype html>
<html>
  <head>
    <title>Ventana Modal usando la etiqueta dialog de HTML</title>

    <!-- Agregando estilos para la caja de diálogo -->
    <style>
      dialog {
        width: 300px;
        height: 150px;
        background-color: #f2f2f2;
        padding: 20px;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #000;
        font-family: Arial, san-serif;
        font-size: 18px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Ventana Modal usando la etiqueta dialog de HTML</h1>

    <!-- Agregando la etiqueta dialog -->
    <dialog id="dialog">
      <p>Esta es una caja de diálogo de muestra!</p>
    </dialog>

    <!-- Agregando un botón para abrir el diálogo -->
    <button onclick="document.getElementById('dialog').showModal()">
      Abrir Diálogo
    </button>

    <!-- Agregando un botón para cerrar el diálogo, que está oculto por defecto  -->
    <button onclick="document.getElementById('dialog').close()">
      Cerrar Diálogo
    </button>
  </body>
</html>

Ahora nuestro código HTML está completo para crear una ventana modal usando la etiqueta dialog de HTML.

Resumen

Ha completado con éxito el laboratorio sobre la creación de una ventana modal usando la etiqueta dialog de HTML. En este laboratorio, discutimos paso a paso el proceso de creación de una caja de diálogo de muestra usando la etiqueta HTML <dialog>. Agregamos un botón simple para abrir y cerrar la caja de diálogo con la ayuda de JavaScript. Además, también agregamos algunos estilos CSS básicos para mejorar la apariencia de la caja de diálogo.