Remodal

Flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking.

Minified version size: ~4kb

#IMPORTANT! If your page body requires height: 100%, your page will scroll to the top(#20, #21), because remodal sets overflow: hidden to the html and body when opening to hide a scrollbar. There is no problem if your content doesn't overflow your full height body container, otherwise you should do something of this:

• Try to set min-height: 100% instead of height: 100%. If it doesn't help, read next.
• Set html, body { overflow: auto !important } or remove overflow property of the remodal_lock class in the CSS file. Your page won't be locked and will be scrollable always.

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: https://github.com/Schepp/CSS-Filters-Polyfill, but it's not fast like a native css3 blur.
• IE9+
• JS code works in IE8 too, but css styles on your own, i don't want to pollute it.
• Zepto support.

Start

That's very simple too start using Remodal.

Download it. You can use bower: bower install remodal

Add this in the head section:

<link rel="stylesheet" href="path/to/your/jquery.remodal.css">

Add this before the </body> or in the head:

<script src="path/to/your/jquery.remodal.min.js"></script>

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

<div class="remodal-bg">
...All your content...
</div>

And now create a modal dialog:

<div class="remodal" data-remodal-id="modal">
    <h1>Remodal</h1>
    <p>
      Flat, responsive, lightweight, fast, easy customizable modal window plugin
      with declarative state notation and hash tracking.
    </p>
    <br>
    <a class="remodal-cancel" href="#">Cancel</a>
    <a class="remodal-confirm" href="#">OK</a>
</div>

So, now you can call it with a hash:

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

Options

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

<div class="remodal" data-remodal-id="modal"
    data-remodal-options='{ "hashTracking": false }'>
    <h1>Remodal</h1>
    <p>
      Flat, responsive, lightweight, fast, easy customizable modal window plugin
      with declarative state notation and hash tracking.
    </p>
    <br>
    <a class="remodal-cancel" href="#">Cancel</a>
    <a class="remodal-confirm" href="#">OK</a>
</div>

hashTracking

Default: true

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

<a data-remodal-target="modal" href="#modal">Call the modal with data-remodal-id="modal"</a>

closeOnConfirm

Default: true

If set to true, closes modal window after clicking confirm button.

closeOnCancel

Default: true

If set to true, closes modal window after clicking cancel button.

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:

<script>
    var options = {...};
    $('[data-remodal-id=modal]').remodal(options).open();
</script>

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();