Dialog Element

Show as modal Show as non-modal

<dialog id="favDialog">
  <form>
    <p>
      <label>
        Send a message
        <input type="text" name="message" />
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button data-modal="true">Show as modal</button>
  <button data-modal="false">Show as non-modal</button>
</p>
<output></output>

dialog {
  margin: auto;
  padding: var(--space-md);
  border-radius: var(--space-xs);
  border: 1px solid var(--color-border);
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 6px -2px rgb(0 0 0 / 0.1);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

const showButtons = document.querySelectorAll('[data-modal]')
const favDialog = document.getElementById('favDialog')
const outputBox = document.querySelector('output')
const messageInput = favDialog.querySelector('input')
const confirmBtn = favDialog.querySelector('#confirmBtn')

showButtons.forEach((button) => {
  button.addEventListener('click', (e) => {
    if (e.target.dataset.modal === 'false') {
      favDialog.show()
    } else {
      favDialog.showModal()
    }
  })
})

favDialog.addEventListener('close', (e) => {
  outputBox.value =
    favDialog.returnValue === 'default'
      ? 'No return value.'
      : `Return value: ${favDialog.returnValue}.`
})

confirmBtn.addEventListener('click', (event) => {
  event.preventDefault()
  favDialog.close(messageInput.value)
  messageInput.value = ''
})