Spawn modals with jQuery
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
lib
.gitignore
package.json
readme.md
webpack.config.js

readme.md

jQuery Modal npm version

Spawn modals with jQuery.

Demo

Why?

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

Goals

  • Simple yet customizable
  • Terse API
  • Transitions
  • Accessible

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