Skip to content

srph/jquery-modal

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
 
 
 
 
 
 

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