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>
</div>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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 README.md.
• 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.