form-submit-overlay

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';

  formSubmitOverlay(document.querySelectorAll('.js-form-submit-overlay')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
</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>

HTML Attributes

data-overlayed-by [required]

ID of the overlay (<dialog> element) to be displayed when form submitting