Remodal : jQuery Responsive & Flat Modal Window Plugin

Remodal : jQuery Responsive & Flat Modal Window Plugin is a flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking.

Minified version size: ~4kb

Notes

• All modern browsers are supported.
• Only webkit browsers has a blur effect in the default css theme. If you want a blur for another kind of browsers use: CSS Filters Polyfill, but it’s not fast like a native css3 blur.
• IE9+
• Zepto support.

Start

That’s very simple too start using Remodal.

Add this in the head section:

Add this before the (or in the head):

Define the background container for the modal(for effects like a blur). It could be any simple content wrapper:

And now create a modal dialog:

So, now you can call it with a hash:

Call the modal with data-remodal-id="modal"

Options

You can pass additional options by the data-remodal-options attribute. Data must be valid JSON.

hashTracking

Default: true

To open a modal without a hash, use data-remodal-target attribute.

Call the modal with data-remodal-id="modal"

Events

$(document).on('open', '.remodal', function () {
    var modal = $(this);
});

$(document).on('opened', '.remodal', function () {
    var modal = $(this);
});

$(document).on('close', '.remodal', function () {
    var modal = $(this);
});

$(document).on('closed', '.remodal', function () {
    var modal = $(this);
});

$(document).on('confirm', '.remodal', function () {
    var modal = $(this);
});

$(document).on('cancel', '.remodal', function () {
    var modal = $(this);
});

Cool bro! But i don’t like declarative style!

Ok, don’t set class attribute and write something like this:

Don’t use id attribute, if you don’t want browser scrolling to the anchor point.

Methods

Get an instance of modal and call a method:

var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')];

// open a modal
inst.open();

// close a modal
inst.close();