Responsive Flat jQuery Modal Plugin with CSS3 Transitions - Remodal

File Size: 30.2 KB
Views Total: 11338
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Flat jQuery Modal Plugin with CSS3 Transitions - Remodal

Remodal is an easy and fast jQuery plugin that popups a responsive & flat styled modal window with CSS3 transitions and fullscreen overlay.

How to use it:

1. Include the required jquery.remodal.css to style your modal windows.

<link rel="stylesheet" href="src/jquery.remodal.css">

2. Create a link to toggle a modal window. 

<a href="#modal">Click</a>

3. The Html structure to create a modal window with close and confirm buttons.

<div class="demo" data-remodal-id="modal">
Modal Content Goes Here
<a class="remodal-cancel" href="#">Cancel</a>
<a class="remodal-confirm" href="#">OK</a>

4. Include the jQuery javascript library and jQuery Remodal's javascript at the bottom of the page.

<script src=""></script>
<script src="src/jquery.remodal.js"></script>

5. Disable the hash tracking option using data-remodal-options attribute.

<div class="demo" data-remodal-id="modal" data-remodal-options='{ "hashTracking": false }'>

6. All the options.

// To open a modal without a hash, 
// use data-remodal-target attribute.
hashTracking: true, 

// If set to true, 
// closes a modal window after clicking confirm button.
closeOnConfirm: true, 

// If set to true, 
// closes a modal window after clicking cancel button.
closeOnCancel: true 

// If set to true, 
// closes a modal window after pressing ESC button.
closeOnEscape: true,

// If set to true, 
// closes a modal window by clicking anywhere on the page.
closeOnAnyClick: true

Change logs:

v0.6.4 (2015-04-07)

  • Protocol-relative URL for fonts.
  • Scroll to the top, when a modal is displayed.
  • Pixels in the media-queries.
  • Added Browserify support.
  • Updated dependencies.

v0.6.3 (2015-02-23)

  • Fix codestyle configs.

v0.6.2 (2015-02-20)

  • Improved the codestyle.
  • Used package.json instead of jquery.json.
  • Updated dependencies.

v0.6.1 (2015-02-19)

  • Fix '#on' event handlers.

v0.6.0 (2015-02-19)

  • Added globals.
  • Added the ability to change the namespace for CSS and events.
  • Used '#on' instead of '#bind'.
  • Fixed double locking/unlocking issue.
  • Updated examples.
  • Updated dependencies.

v0.5.0 (2015-01-22)

  • Fixed a scrolling to the top of a page.
  • Added the 'reason' parameter to the close/closed events.
  • Updated examples.
  • Updated dependencies.

v0.4.1 (2014-12-19)

  • Constructor always returns an instance

v0.4.0 (2014-12-14)

  • Changed CSS class names.
  • Shared overlay.
  • Changed visual styles.
  • Improved IE8 styles.
  • Updated dependencies.
  • Fixes.

v0.3.0 (2014-11-05)

  • Added font-size of inputs to prevent iOs zooming.
  • Convert image for IE8 to base64.
  • Fix tests.
  • Fix scrollbar padding for Zepto.
  • Code refactoring.
  • Improved code linting.
  • Cleaned up the repository.
  • Updated dependencies.

v0.2.1 (2014-10-19)

  • Moved @import to the top of the file. Meteor requires the @import to be at the top.
  • Adding some basic CSS support for IE8.
  • Added CloseOnEscape and CloseOnAnyClick options.
  • Updated
  • Updated tests.

v0.2.0 (2014-07-29)

  • Fix safari ghost padding bug.
  • Add parsing of non-json strings with options. 
  • Fix jshint errors.
  • Update examples.

v0.1.7 (2014-07-15)

  • Catch syntax error if the hash is bad.
  • Add 'closeOnConfirm', 'closeOnCancel' options.

v0.1.6 (2014-05-16)

  • update.

v0.1.5 (2014-05-03)

  • Support for trailing slashes in URL.
  • Fix unnecessary body padding.

v0.1.4 (2014-04-06)

  • Works in the old android, ios browsers and other.

v0.1.3 (2014-04-01)

  • Fix page scrolling bug
  • Refactor CSS

v0.1.2 (2014-03-06)

  • Public collection of instances. Now you can get specific instance throw JS: var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')];;
  • Plugin constructor calling returns instance now. var inst = $('[data-remodal-id=modal]').remodal().

v0.1.1 (2014-02-24)

  • Zepto support!
  • Blur is changed from 5px to 3px.

This awesome jQuery plugin is developed by VodkaBears. For more Advanced Usages, please check the demo page or visit the official website.