Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>
  <h1>Dialog Demo</h1>
  <p>
    <button id="js-open-button">Open me!</button>
  </p>
  <p>Oh, you love black and white? Check out <a href="https://codepen.io/mikemai2awesome/pen/KKvMZVz?editors=0100" target="_blank">SuperMinimalCSS</a>.</p>
  <p>And then some more filler text to make this page long and you hungry.</p>
  <p>Spicy jalapeno chislic brisket kielbasa corned beef ham hock. Porchetta alcatra buffalo pork loin pig. Ribeye meatball ham hock prosciutto chicken. Pork chop meatloaf beef ground round ham tri-tip strip steak sausage biltong salami drumstick bresaola.</p>
  <p>Pork belly tongue beef pig, boudin pork frankfurter short loin spare ribs pork loin sirloin swine pastrami shoulder. Shank pork belly cow boudin pig tri-tip. Biltong tongue venison corned beef. Tongue pancetta andouille, picanha pork loin flank chicken jerky spare ribs sausage boudin pork chop rump corned beef. Pork loin picanha jerky, pancetta short loin meatball tenderloin ham. Brisket ham pancetta, chuck ham hock sirloin cupim pork chop short loin shoulder prosciutto rump. Shoulder capicola strip steak buffalo spare ribs.</p>
  <p>Ham hock salami alcatra, jerky boudin burgdoggen short ribs porchetta strip steak. Venison pork pork belly, doner drumstick turkey burgdoggen biltong tri-tip pancetta porchetta chicken. Picanha kevin swine drumstick, pancetta capicola sirloin shankle ground round beef ribs. Bacon chicken cow doner pork strip steak. Cupim tongue ham bacon turducken tenderloin shank burgdoggen tail beef ribs chislic.</p>
  <p>Leberkas fatback flank, prosciutto ham hock pancetta rump kevin. Short loin salami meatball cow, boudin drumstick ribeye. Drumstick bresaola filet mignon pork belly hamburger tenderloin prosciutto doner venison t-bone. Brisket pork beef shoulder shankle turducken chislic rump, tongue porchetta. Burgdoggen pork belly shank fatback tail.</p>
  <p>Pork loin capicola chicken pork belly sausage ham spare ribs tri-tip swine frankfurter. Frankfurter spare ribs ham, capicola short ribs tongue fatback tri-tip cupim prosciutto pastrami. T-bone shoulder rump porchetta chuck alcatra jerky tenderloin. Shankle corned beef burgdoggen short ribs pork chop cow short loin kielbasa alcatra ham.</p>
  <p>Brisket filet mignon pig turkey beef, short ribs alcatra kielbasa ball tip pork loin. Tail hamburger short ribs, strip steak leberkas chislic spare ribs sirloin pork belly venison. Ribeye rump leberkas t-bone kevin venison pork chop. Kevin cupim bresaola shankle short ribs chuck swine short loin prosciutto. Sausage beef ball tip, doner pork chop sirloin turducken kielbasa ham frankfurter pastrami prosciutto cupim. Brisket pig spare ribs ham hock.</p>
  <p>Kevin strip steak meatball tenderloin pig sirloin chislic biltong tri-tip frankfurter. Frankfurter beef shank pastrami landjaeger. Pork chop burgdoggen meatball porchetta tongue pastrami. Buffalo chicken jowl tongue hamburger cupim pancetta. Ham shoulder porchetta, chicken burgdoggen hamburger turducken pancetta kevin filet mignon.</p>
  <p>Doner meatball buffalo short loin tongue kielbasa shank tri-tip spare ribs bresaola. Leberkas bacon kielbasa capicola. Shank brisket kevin frankfurter kielbasa cow, chislic bacon porchetta beef ribs ham hock beef bresaola sirloin. Cow ribeye kielbasa pancetta shankle pork loin filet mignon drumstick tri-tip flank spare ribs ham hock bresaola ham meatball. Short loin salami shoulder venison ball tip. Rump andouille meatloaf, beef ribs pastrami salami boudin spare ribs pork loin.</p>
  <p>Tri-tip meatloaf cow ribeye, t-bone chislic doner boudin tail ham hock kielbasa venison. Buffalo hamburger chuck shoulder, tenderloin kielbasa ham hock biltong venison beef ribs fatback meatball. Filet mignon flank sirloin ham hock. Pork chop ham swine picanha ground round jerky. Pastrami leberkas hamburger shank, salami picanha brisket pork belly burgdoggen. Prosciutto pig bresaola meatloaf sirloin pork belly jowl, beef meatball picanha spare ribs porchetta sausage.</p>
  <p>Chuck tenderloin cupim burgdoggen sausage venison pork belly chislic, bacon cow kevin. Filet mignon tri-tip ham, jerky shoulder ball tip sirloin jowl doner pig biltong. Boudin ham hock sausage chicken tri-tip pastrami. Pancetta bresaola filet mignon cow fatback pork swine pig. Buffalo tenderloin pork belly andouille, venison prosciutto capicola.</p>
</main>

<dialog id="dialog" class="dialog">
  <header>
    <h1>Got bacon?</h1>
    <button type="submit" aria-label="Close dialog" id="js-close-button">
      <svg viewBox="0 0 352 512" width="100" title="times">
        <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" />
      </svg>
    </button>
  </header>
  <article>
    <p>Short ribs ham pastrami ball tip bacon, frankfurter fatback meatloaf prosciutto hamburger meatball shank ground round tongue cupim. Cow kielbasa flank turducken, beef ribs beef bresaola kevin ribeye pork loin spare ribs shoulder short ribs ham chuck. Turkey prosciutto short ribs turducken jerky. Venison tenderloin <a href="https://mikemai.net">chislic leberkas</a>. Pork belly salami pork loin bresaola, kielbasa flank capicola burgdoggen bacon buffalo chicken tenderloin beef ribs ham strip steak.</p>
    <form method="dialog">
      <p>
        <button type="submit">Close me! (without animation)</button>
      </p>
    </form>
  </article>
</dialog>
              
            
!

CSS

              
                // Animations inspired by https://twitter.com/argyleink/status/1514304912842129410

html:has(dialog[open]) {
  overflow: hidden;
}

.dialog {
  --animation-in-settings: 500ms cubic-bezier(0.25, 0, 0.3, 1) normal;
  --animation-out-settings: 500ms cubic-bezier(0.5, -0.5, 0.1, 1.5) normal;

  max-inline-size: min(90vw, 45ch);
  max-block-size: min(80vh, 100%);
  max-block-size: min(80dvb, 100%);
  padding: 0;
  color: var(--color-text);
  background-color: var(--color-bg);

  &[open] {
    animation: slidein var(--animation-in-settings);

    @media (prefers-reduced-motion: reduce) {
      animation: fadein var(--animation-out-settings);
    }
  }

  &.is-hidden {
    animation: minimize var(--animation-out-settings);

    @media (prefers-reduced-motion: reduce) {
      animation: fadeout var(--animation-out-settings);
    }
  }

  header,
  article {
    padding-inline: var(--spacing-x);
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    position: sticky;
    top: 0;
    padding-block: calc(var(--spacing-y) / 2);
    background-color: var(--color-bg);
    border-bottom: var(--border-width) solid;

    > * {
      margin: 0;
      line-height: 1;
    }

    button {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
    }
  }

  article {
    padding-block: var(--spacing-y);
  }
}

.dialog::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.5rem);
  animation: none;
}

.dialog[open]::backdrop {
  animation: fadein var(--animation-in-settings);
}

.dialog.is-hidden::backdrop {
  animation: fadeout var(--animation-out-settings);
}

svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

@keyframes slidein {
  from {
    opacity: 0;
    transform: translateY(50%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  to {
    opacity: 0;
  }
}

@keyframes minimize {
  to {
    opacity: 0;
    transform: scale(0);
  }
}

// From SuperMinimalCSS:

/* ------------------------------------ *\
   Config
\* ------------------------------------ */

:root {
  --golden-ratio: 1.61803398875;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
  --font-serif: "Georgia", serif;
  --font-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  --color-text: #202020;
  --color-bg: #f4f4f4;
  --gutter: 3ch;
  --leading: 1.4;
  --spacing-x: var(--gutter);
  --spacing-y: calc(var(--leading) * var(--golden-ratio) * 0.8ex);
  --page-padding-x: calc((100vw - min(75ch, 80vw)) / 2);
  --border-width: 1px;
  --border-radius: 4px;
}

/* ------------------------------------ *\
   Color
\* ------------------------------------ */

:root {
  color: var(--color-text);
  background-color: var(--color-bg);
  accent-color: var(--color-text);
  color-scheme: light;
}

:where(a) {
  color: var(--color-text);
}

:where(button) {
  color: var(--color-bg);
  background: var(--color-text);
}

:where(code) {
  /* Invert the colors on these ones. */
  color: var(--color-bg);
  background: var(--color-text);
}

/* ------------------------------------ *\
   Typography
\* ------------------------------------ */

:root {
  font-size: clamp(
    100%,
    calc(100% + 0.25vw),
    200%
  ); /* % ensures browser zoom is supported. */
  font-family: var(--font); /* Use system UI font. */
  line-height: var(--leading); /* Standard leading for good legibility. */
  letter-spacing: -0.006em;
}

:where(a) {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: calc(var(--border-width) * 2);
}

:where(a):hover {
  text-decoration-thickness: calc(var(--border-width) * 3);
}

:where(pre, code, kbd, dl, figcaption, abbr, table) {
  font-family: var(
    --font-monospace
  ); /* Differentiate preformatted, code, description, and table text from body text. */
}

:where(pre, code, kbd, dl, small, figcaption, table) {
  font-size: 0.8em; /* Make monospace and small text smaller than body text. */
}

:where(pre code) {
  display: block; /* Define block code. */
  font-size: 1em; /* Prevent cascading. */
}

:where(blockquote) {
  font-family: var(
    --font-serif
  ); /* Differentiate pull quotes from body text. */
  font-size: 1.5em;
}

:where(legend, strong, b, th) {
  font-weight: 700; /* Make non-heading emphasized text less bold than heading text. */
}

:where(button, select, input, textarea, a) {
  font-family: inherit; /* Reset font. */
  font-size: inherit; /* Reset font. */
  font-weight: 500; /* Emphasize interactive and pullquote text more than body text. */
}

:where(caption) {
  text-align: start;
}

:where(abbr) {
  text-decoration: underline;
  text-decoration-style: dotted; /* Differentiate abbreviaions from links. */
  text-underline-offset: calc(var(--border-width) * 2);
}

:where(button, label, summary) {
  cursor: pointer;
}

:where(blockquote q):before {
  position: absolute;
  transform: translateX(-100%);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 900;
}

/* ------------------------------------ *\
   Spacing
\* ------------------------------------ */

:where(h1, h2, h3, h4, h5, h6) {
  margin-block-end: calc(var(--spacing-y) / 5);
}

:where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) {
  margin-block-start: 0;
}

:where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details) {
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-end: var(--spacing-y);
}

:where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):last-child {
  margin-block-end: 0;
}

:where(ul, ol) {
  margin-inline-start: var(
    --spacing-x
  ); /* Unify indent for all lists, and account for at least 2-digit number counter plus a dot for ordered list. */
  padding: 0; /* Remove extra padding. */
}

:where(li > ul, li > ol) {
  margin-block-start: calc(var(--spacing-y) / 5);
}

:where(li + li) {
  margin-block-start: calc(var(--spacing-y) / 5);
}

:where(blockquote p) {
  margin-block-end: calc(var(--spacing-y) / 2);
}

:where(input, textarea, select, button, caption, figcaption, dd, th, td) {
  /* Unify inset spacing on bordered elements. */
  padding-block: calc(var(--spacing-y) / 6);
  padding-inline: calc(var(--spacing-x) / 3);
}

:where(code, kbd) {
  padding-block: 0.25ex;
  padding-inline: 0.5ch;
}

:where(figure, pre) {
  padding-block-start: calc(
    var(--spacing-y) / 2.5
  ); /* Line up top of images/codeblocks with text in an adjacent column layout. */
}

:where(pre code) {
  padding-block: var(--spacing-y);
  padding-inline: var(--spacing-x);
}

/* ------------------------------------ *\
   General
\* ------------------------------------ */

*,
*:before,
*:after {
  font-feature-settings: "kern";
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box;
}

:where(input, fieldset, textarea, select, button, kbd, dt, dd, table, th, td) {
  /* Unify border styles. */
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--color-text);
}

:where(input, fieldset, textarea, select, button, kbd) {
  /* Unify interactive elements border radius. */
  border-radius: var(--border-radius);
}

*:focus {
  outline: calc(var(--border-width) * 2) dashed var(--color-text);
  outline-offset: var(--border-width);
}

:where(pre) {
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: normal;
  word-wrap: break-word;
}

:where(dl) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--spacing-x) / 2);
  row-gap: calc(var(--spacing-y) / 2);
  align-items: baseline;
  overflow-x: auto;
}

:where(dt) {
  border-color: transparent;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: calc(var(--border-width) * 2);
}

:where(dd) {
  margin-inline-start: 0;
}

:where(label input, label select, label textarea) {
  inline-size: 100%;
}

:where(input[type="radio"], input[type="checkbox"]) {
  inline-size: 1.5ex;
  block-size: 1.5ex;
  vertical-align: baseline;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

:where(hr) {
  block-size: 0;
  margin-block-start: 4ex;
  margin-block-end: 4ex;
  border: 0;
  border-block-start: 1px dashed var(--color-text);
}

:where(img) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(figure) {
  inline-size: 100%;
  overflow-x: auto;
  text-align: center;
}

:where(table) {
  border-spacing: 0;
  caption-side: bottom;
}

:where(details[open] summary) {
  margin-block-end: calc(var(--spacing-y) / 4);
}

:where(summary > *) {
  display: inline;
  vertical-align: middle;
}

/* ------------------------------------ *\
   Auto-detect Dark Mode
\* ------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f4f4f4;
    --color-bg: #101010;
    color-scheme: dark;
  }
}

/* ------------------------------------ *\
   Page Layout
   - These are optional.
   - Remove to do your own layouts.
\* ------------------------------------ */

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100dvb;
}

body > * {
  inline-size: 100vw;
}

:where(main) {
  padding-block: clamp(
    calc(var(--spacing-y) * 1),
    10vw,
    calc(var(--spacing-y) * 2)
  );
  padding-inline: var(--page-padding-x);
}

:where(body > header, body > footer) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-x);
  row-gap: calc(var(--spacing-y) / 2);

  > *:only-child {
    margin-block: 0;
    margin-inline: auto;
  }
}

:where(body > footer) {
  padding-block: clamp(
      calc(var(--spacing-y) * 1),
      10vw,
      calc(var(--spacing-y) * 2)
    )
    clamp(calc(var(--spacing-y) * 2), 10vw, calc(var(--spacing-y) * 6));
  padding-inline: var(--page-padding-x);
  border-block-start: 1px solid;
}

:where(body > header) {
  padding-block: clamp(
      calc(var(--spacing-y) * 2),
      10vw,
      calc(var(--spacing-y) * 6)
    )
    clamp(calc(var(--spacing-y) * 1), 10vw, calc(var(--spacing-y) * 2));
  padding-inline: var(--page-padding-x);
  border-block-end: 1px solid;

  h1 {
    margin: 0;
    line-height: 1.2;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  h1 a,
  > a {
    display: block;
    font-size: 1.35em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  > nav {
    ul {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--spacing-x);
      row-gap: calc(var(--spacing-y) / 2);
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 0.9em;
    }
  }
}

              
            
!

JS

              
                // Learned from https://codepen.io/geckotang/post/dialog-with-animation

var dialog = document.querySelector("dialog");
document.querySelector("#js-open-button").onclick = function () {
  //dialog.show();
  dialog.showModal();
};
document.querySelector("#js-close-button").onclick = function () {
  dialog.classList.add("is-hidden");
  dialog.addEventListener(
    "webkitAnimationEnd",
    function () {
      dialog.classList.remove("is-hidden");
      dialog.close();
      dialog.removeEventListener("webkitAnimationEnd", arguments.callee, false);
    },
    false
  );
};

              
            
!
999px

Console