@srph/jquery-modal

A jQuery plugin to spawn modals with terse API

Usage no npm install needed!

<script type="module">
  import srphJqueryModal from 'https://cdn.skypack.dev/@srph/jquery-modal';
</script>

README

jQuery Modal npm version

[WIP] A jQuery plugin to spawn modals with terse API that also handles Web Accessibility.

Demo

Why?

  • NIH
  • Most similar plugins out there seem to be feature-complete but complicated

Goals

  • Simple yet customizable
  • Terse API
  • Transitions
  • Accesible

Unsupported

  • Nested modals (will not work)
  • Old browsers (may work)

Usage

<button type="button" data-modal="#my-modal">
  Open Modal
</button>

<div id="my-modal">
  <!-- Modal Markup -->
  <button type="button" data-modal-close="my-modal">
    Close
  </button>
</div>

API

var $modal = $('#modal')
$modal.modal(opts) // Init
$modal.modal('open') // Progamatically open
$modal.modal('close') // Programatically close

Options

key description type default
backdrop Flag whether to use a backdrop, and attach a modal-close event to the backdrop) string with the selector name or false to disable backdrop The modal itself
escapable Close modal on escape boolean true

Events

  • $modal.on('modal:open', cb) - Triggered when modal is opened
  • $modal.on('modal:close', cb) - Triggered when modal is closed

Contributing

npm run example:build # Build example
npm run example:start # Build example, and watch for changes
open examples/index.html