Flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking.
Minified version size: ~4kb
- 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+
- Zepto support.
That's very simple too start using 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>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>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>$(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);
});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.
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();
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent