What is Modest Modal?

Modest modal is a jQuery plugin that makes as few styling presumptions as possible. Technically I could've left out the overlay but good news, you can override it. Essentially it just centers a div on the page and fades an overlay into view.

To see the default styles open the base modal — it's just text on the overlay so it may be tough to see.

This was inspired by uglipop.js but created for jQuery to allow for more plugin options and allow for stacking (and keeping track of) multiple modals.

Usage

Include the modestmodal.jquery.min.js somewhere after your jquery include at the bottom of the body – or wherever your scripts are.
Then just call initialize the plugin $.modestmodal().

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="compiled/modestmodal.jquery.js"></script>

<script>
    $.modestmodal()
</script>

From there, you can manually call $.modestmodal.open({options}) or add data-modestmodal to whatever element you want to trigger the modal (on click).

Options

{
    type: '', // 'ajax', 'html', or 'content'
    content: '', // 'url' when ajax, 'css-selector' when html, 'string' when content
    modalClass: '', // 'class' to add to modal on top of default class
    closeButton: '', // a 'selector' to apply the close button binding to
    transitionDuration: '', // '0.4s' override the transition length for fadeins
    positionX: '', // '50%', '500px', etc. Override the initial position FROM LEFT (for animation before it reaches 50%)
    positionY: '', // '50%', '500px', etc. Override the initial position FROM TOP (for animation before it reaches 50%)
    overlayBackground: '', // css background property values to override overlay – i.e. 'url(bg.jpg) top left no-repeat'
    disableEscape: Boolean, // passed in as true/false or checks existence of data attribute (with no value)
    uncloseable: Boolean, // passed in as true/false or checks existence of data attribute (with no value)
    ajaxCallback: function(){} // only works from code with function passed in 
}

Element-Based Options

<a href="#"
    data-modestmodal
    data-modestmodal-type="" <!-- 'ajax', 'html', or 'content' -->
    data-modestmodal-content="" <!-- 'url' when ajax, 'css-selector' when html, 'string' when content -->
    data-modestmodal-modal-class="" <!-- 'class' to add to modal on top of default class -->
    data-modestmodal-close-selector="" <!-- a 'selector' to apply the close button binding to -->
    data-modestmodal-transition-duration="" <!-- '0.4s' override the transition length for fadeins -->
    data-modestmodal-position-x="" <!-- '50%', '500px', etc. Override the initial position FROM LEFT (for animation before it reaches 50%) -->
    data-modestmodal-position-y="" <!-- '50%', '500px', etc. Override the initial position FROM TOP (for animation before it reaches 50%) -->
    data-modestmodal-overlay-background="" <!-- css background property values to override overlay – i.e. 'url(bg.jpg) top left no-repeat' -->
    data-modestmodal-disable-escape <!-- use data attribute as a boolean (no value) -->
    data-modestmodal-uncloseable> <!-- use data attribute as a boolean (no value) -->

    Link to Modal</a>

Methods

$.modestmodal.open({options})

Will open a new modal based on the options object passed in

$.modestmodal.getOpenModals()

Returns an array of objects with the modals and overlays currently open in the order they were opened.

The objects returned are

{
    modal: $(), //jQuery object referencing the modal element
    overlay: $() //jQuery object referencing the overlay element
}

$.modestmodal.close(optional index)

Will close the last open modal by default. Accepts an optional index to close/remove (it uses the same array as getOpenModals). If the index is invalid, it reverts to closing the last open.

$.modestmodal.destroy()

Removes the modest modal plugin and removes any residual elements.
Note: this removes any elements who's id or class starts with “modestmodal-”

Custom Events

mm.beforeOpen: Fires before the modal or overlay are added to the DOM and shown.
mm.open: Fires after element has been added and given full opacity (may happen before CSS transitions)
mm.beforeClose: Fires as soon as the close method is called
mm.close: Fires after modal and overlay are close and have been removed (if applicable)

Versions

1.0.4

Add position property to modals
Renames positionX and positionY to left and top respectively
Quick-fix for multiple binding bug
Fix for transparent modal staying displayed

1.0.3

Adds custom events to modal. Can be used with type=HTML or with subscribed to through event bubbling.
Duplicates modal when HTML is used so it knows not to remove it on close.
Adds index option to close method.

1.0.0

Initial commit

Known Issues / Idea Board

Options passed on initialization are persistent when opening via method call ($.modestmodal.open()) but are ignored when calling a modal from data attributes on elements.
Currently only accepts #s or #.#s notation for transition duration. Would be mice to add conversion to/from ms.
Currently only works in IE9+. TODO: Change translate -50% to negative margins in a child div.
Add absolute vs fixed positioning (potentially disable body scroll?)
Doesn't account for browser window height and doesn't allow scrolling (to top or botttom of modal container). Will either need a max-height in the code or adding “meta” scrolling of the modal. The may be something that is just offset to the user's CSS styles to handle.

Having problems?

Hit me up on twitter @onlinebhero

Create an issue in git, pull-request, or fork it — or fork off ;).