Frontend Snippets

dialog.html

<!-- @format -->

<style>
  dialog {
    --diag-bg: whitesmoke;
    --diag-bg-img: none;
    --diag-x: 1.5rem;
    --diag-y: 1.5rem;
    --bk-drop: rgba(0, 0, 0, 0.5);

    background-color: var(--diag-bg);
    background-image: var(--diag-bg-img);
    padding-inline: var(--diag-x);
    padding-block: var(--diag-y);
  }
  dialog::backdrop {
    --bk-drop: rgba(0, 0, 0, 0.5);
    background-color: var(--bk-drop);
  }
</style>
<div>
  <button type="button" onclick="openDialog('#dialog-elm',this)">
    Open Dialog
  </button>
  <dialog id="dialog-elm">
    <h3>Example modal</h3>

    <p>
      Native HTML5 Modals (Dialogs) are finally here and available across all
      ever green browsers and they are fun!
    </p>
    <button class="btn btn-close" onclick="closeDialog(this)">Close</button>
  </dialog>
</div>
<script>
  function openDialog(target, elm) {
    console.log(target, elm)
    document.querySelector(target).showModal()
  }
  function closeDialog(elm) {
    elm.closest('dialog').close()
  }
</script>

frontend.md

A Collection of useful frontend snippets;