<style>
        .dialog {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        .dialog-content {
            background-color: white;
            margin: 15% auto;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 500px;
        }
    </style>
1.-<dialog id="myDialog" class="dialog">
      <div class="dialog-content">
          <h2>Dialog Title</h2>
          <p>This is a dialog box.</p>
          <button onclick="myDialog.close()">Close</button>
          <button onclick="myDialog.showModal()">Abrir Modal</button>
      </div>
	</dialog>
<script>
  const myDialog = document.getElementById('myDialog');
</script>

<button onclick="myDialog.showModal()">abrir Modal</button>
    
2.-<button id="openDialog">Abrir diálogo</button>

<dialog id="myDialog">
  <p>Este es un cuadro de diálogo</p>
  <button id="closeDialog">Cerrar</button>
</dialog>

<script>
  const openDialogButton = document.getElementById("openDialog");
  const dialog = document.getElementById("myDialog");
  const closeDialogButton = document.getElementById("closeDialog");

  openDialogButton.addEventListener("click", () => {
    dialog.showModal(); // Muestra el cuadro de diálogo en modo modal
  });

  closeDialogButton.addEventListener("click", () => {
    dialog.close(); // Cierra el cuadro de diálogo
  });
</script>