details-dialog

back edit

Dialog with Box from Primer CSS. Add [data-close-dialog] to a <button> to close a dialog on click.

In github/github, please use GitHub::DialogComponent instead of writing the markup from scratch whenever possible.

<details class="details-reset details-overlay details-overlay-dark">
  <summary class="btn">Customize</summary>
  <details-dialog class="anim-fade-in fast Box Box--overlay">
    <form>
      <div class="Box-header d-flex">
        <div class="Box-title flex-auto">Title</div>
        <button type="button" class="muted-link btn-link" aria-label="Close dialog" data-close-dialog><%= octicon "x" %></button>
      </div>
      <div class="Box-body">
        <label for="input">Input</label>
        <input type="text" id="input" name="input" class="form-control width-full mt-2" autofocus>
      </div>
      <div class="Box-footer">
        <button type="submit" class="btn btn-block">Submit</button>
      </div>
    </form>
  </details-dialog>
</details>

<details-dialog src> with <include-fragment>. Add [preload] to load content on mouseover.

<details class="details-reset details-overlay details-overlay-dark">
  <summary class="btn">Fork</summary>
  <details-dialog class="anim-fade-in fast Box Box--overlay p-4"
    src="../../support/deferred_content.html"
    preload>
    <include-fragment class="octoca-spinner"></include-fragment>
  </details-dialog>
</details>