boost-js-modal v0.1.1
Boost JS Modal 
A style-free and accessible modal plugin for jQuery and Boost JS. This plugin only includes styles absolutely necessary for the modal to work properly, the rest is up to you.
Installation
Install with npm:
npm install boost-js-modalInstall in browser:
<script src="https://cdn.rawgit.com/marksmccann/boost-js-modal/v0.1.1/dist/modal.min.js"></script>AND include styles:
<link rel="stylesheet" href="https://cdn.rawgit.com/marksmccann/boost-js-modal/v0.1.1/dist/modal.min.css">Usage
Create Plugin
var boost = require('boost-js');
// var boost = $.fn.boost; (browser install)
var modal = require('boost-js-modal');
// var modal = $.fn.boost.modal; (browser install)
$.fn.modal = boost( modal.plugin, modal.defaults );Markup Structure
<div id="modal">
<h2 data-bind="#modal" data-role="heading">Heading</h2>
<button data-bind="#modal" data-role="close">Close</button>
</div>
<button data-bind="#modal" data-role="open">Open</button>Tip: Add style="display:none;" to your source element if your modal is momentarily visible before the app is able to hide it; the attribute will be removed after instantiation.
Note: data-bind is used to link the element to the instance, data-role is used to define the element's role in that instance. See Boost JS for more details.
Instantiate Plugin
$('#modal').modal();Options
| Name | Default | Description |
|---|---|---|
| activeClass* | "is-open" | the class added to the outer container when active |
| wrapClass* | "modal-wrap" | the class added to the inner container of the modal |
| maskClass* | "modal-mask" | the class added to the mask/outer-most container of the modal |
| effect | null | an optional animation for modal, see below for details |
| closeOnClickOff | true | close the modal if user clicks anywhere off of it |
| closeOnEsc | true | close the modal when user presses the esc key |
| openOnLoad | false | open the modal at instantiation (page load) |
| onOpen | null | a callback function called when the modal is opened |
| onClose | null | a callback function called when modal is closed |
| onInit | null | a callback function called when modal is initialized |
*Note: if you change any of the class names, you will have to update the same classes in the css as well.
Usage
$('#modal').modal({
onInit: function() {
console.log( this.id ); // 'modal'
}
});- or -
<div id="modal" data-open-on-load="true">...</div>Roles
| Name | Element | Description |
|---|---|---|
| open | a, button | defines a trigger that opens the modal |
| close | a, button | defines a trigger that closes the modal |
| toggle | a, button | defines a trigger that toggles the modal open and closed |
| heading | h2 | used to define the modal with a aria-labelledby on container |
| end | a, button | defines the last focusable element in modal for blur event |
Usage
<button data-bind="[instance-id]" data-role="[role-name]">...</button>Effects
- scale-up
- scale-down
- slide-left
- slide-right
- slide-up
- slide-down
- sticky-top
- horizontal-flip
- vertical-flip
- spin-up
- spin-down
- fall-left
- fall-right
- swing-down
- swing-up
- swing-left
- swing-right
- front-flip
- back-flip
Usage
Include the effects stylesheet
<link rel="stylesheet" href="https://cdn.rawgit.com/marksmccann/boost-js-modal/v0.1.1/dist/effects.min.css">Then update the setting
<div id="modal" data-effect="scale-up">...</div>API
open( fn )
Opens the modal. fn: optional callback function called after opening.
instance.open();close( fn )
Closes the modal. fn: optional callback function called after opening.
instance.close();toggle( fn )
Closes the modal if it is open and opens the modal if it is closed. fn: optional callback function called after opening.
instance.toggle();isOpen()
Determines if modal is open or not, returns a boolean.
instance.isOpen();lastOpenedBy
The element last triggered to open this modal. After the modal is closed, this value returns to null.
instance.lastOpenedBy;container
The outer-most containing element for the modal.
instance.container;Running Tests
$ npm install && npm testLicense
Copyright © 2016, Mark McCann. Released under the MIT license.