Cover the entire screen with an overlay when form submitting

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/form-submit-overlay": "..."
    }
  }
</script>
<script type="module">
  import FormSubmitOverlay from '@w0s/form-submit-overlay';

  for (const formElement of document.querySelectorAll('.js-form-submit-overlay')) {
    new FormSubmitOverlay(formElement);
  }
</script>

<form class="js-form-submit-overlay"
  data-overlayed-by="form-submit-overlay"
>
</form>

<dialog id="form-submit-overlay" aria-labelledby="form-submit-overlay-message" aria-describedby="form-submit-overlay-message">
  <p id="form-submit-overlay-message">Loading...</p>
</dialog>

Constructor

new FormSubmitOverlay(
  thisElement: HTMLFormElement
)

Parameters

HTMLElement Attributes