<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>

    <div class="warning-message">
      :modal isn't supported in this browser :(
    </div>

    <dialog>
      <p>I'm a Dialog</p>
      <button>Close</button>
    </dialog>

    <h1><code>&lt;dialog&gt;</code> and <code>:modal</code> example</h1>
    
    <div class="actions">
      <button data-modal="true">Open Modal</button>
      <button data-modal="false">Open Non-modal</button>
    </div>
  
  <div><a target="_blank" href="https://codewithnodejs.com/using-dialog-and-modal/">https://codewithnodejs.com/using-dialog-and-modal/</a>

  </body>
@import url(https://unpkg.com/normalize.css) layer(normalize);
@import url(https://unpkg.com/open-props/normalize.min.css) layer(open-props);
@import url(https://unpkg.com/open-props/open-props.min.css) layer(open-props);
@import url(https://rodydavis.github.io/material-design-lite/css/mdl.min.css) layer(mdl);
@import url(https://rodydavis.github.io/material-design-lite/css/themes/baseline.css) layer(mdl);

@layer demo {
  dialog[open]:not(:modal) {
    z-index: 2;
    transform-style: preserve-3d;
  }

  dialog[open]:not(:modal):before {
    content: "";
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 50%;
    left: 50%;
    background: hsl(180 100% 40% / 0.25);
    transform: translate3d(-50%, -50%, -1px);
  }
}

@layer base {

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--gradient-1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .actions {
    display: flex;
    gap: var(--size-4);
    margin-top: var(--size-6);
    justify-content: center;
  }

  dialog {
    padding: var(--size-4);
    gap: var(--size-2);
    background: var(--surface-1);
  }

  dialog::backdrop {
    background: hsl(0 0% 10% / 0.5);
  }

  dialog[open] {
    display: grid;
  }

  h1 {
    text-align: center;
    min-width: 100%;
    color: rgb(var(--md-ref-palette-primary98-rgb));
  }

  code {
    color: rgb(var(--md-ref-palette-primary20-rgb));
  }

  button, p, h1 {
    font-family: inherit;
  }
  
  a {
    display: inline-block;
    margin-top: var(--size-4);
    color: rgb(var(--md-ref-palette-primary98-rgb));
  }

  @supports (selector(:modal)) {
    .warning-message {
      display: none;
    }
  }

}

(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
(function () {
  'use strict';

  const buttons = document.querySelectorAll("button");
  const dialog = document.querySelector("dialog");
  buttons.forEach(button => {
    button.addEventListener("click", e => {
      let modalStyle;

      switch (button.getAttribute("data-modal")) {
        case "true":
          modalStyle = "showModal";
          break;

        case "false":
          modalStyle = "show";
          break;

        default:
          modalStyle = "close";
      }

      dialog[modalStyle]();
    });
  });

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.