Responsive Flexible jQuery Modal Window Plugin - RiModal

RiModal is a responsive, flexible, dynamic jQuery modal plugin that supports iframes, Ajax loaded content, plain content and very much more.

How to use it:

1. Load jQuery library and the jQuery RiModal plugin's file in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/jquery.rimodal.js"></script>
<link href="src/jquery.rimodal.css" rel="stylesheet">

2. Using the $.RiModal constructor.

var modal = new $.RiModal({
  title: 'Dialog Title',
  iframe: '/dialog/content'
}).open();

3. Using data-modal-* attributes to set options.

<a href="#" 
   data-modal-title="Title" 
   data-modal-width="400" 
   data-modal-height="200" 
   data-modal-ajax="/more/info"
>Click for modal</a>

<script>$('a').riModal()</script>

4. Ajax, iframe, content, element can be pulled from the given attribute.

<a href="/some/autoheight/ajax" 
   data-modal-title="Title" 
   data-modal-width="500" 
   data-modal-height="auto" 
>Click for modal</a>
<script>$('a').riModal({ ajax:{attribute:'href'} })</script>

5. Using delegate to listen for a click on the given selector. The modal title defaults to the origin element's text contents. Or title can be a function.

<div id="movies">
  <a href="#" data-modal-ajax="/movie/101">A Christmas Story (PG, 1983)</a>
  <a href="#" data-modal-ajax="/movie/102">The Princess Bride (PG, 1987)</a>
</div>

<script>
$('#movies').riModal({
  delegate: 'a',
  width: 600,
  height: 400,
  title: function() {
    return this.$origin.text().replace(/\(.+\)/, '');
  }
});
</script>

6. Appending an existing element within the modal.

<div style="display:none">
  <div id="content">Modal Content</div>
</div>
<a href="#" data-modal-title="Modal Title!" data-modal-element="#content">Click to open modal</a>

<script>
$('a').riModal();
</script>

7. Note that content defaults to iframe equalling href.

<a href="/some/fullscreen/iframe" 
   data-modal-title="Title" 
   data-modal-width="full" 
   data-modal-height="full" 
>Click for modal</a>

<script>
$('a').riModal()
</script>

8. Closing a modal from within the modal's iframe.

<script>
$.RiModal.get('self').close();
</script>

9. Full options.

// The title text to put on the dialog header
title: '',

// The width/height of the content area. 
// Use "full" for full width/height
width: 400,
height: 300,

// The number of milliseconds over which to animate opening and closing
animation_duration: 400,

// If true, allow dragging the dialog box
draggable: false,

// The selector for the drag handle
drag_handle: '.ri-modal-title',

// If true, set modal contents opacity to 0 while dragging.
// If false, always show modal contents
ghost_while_dragging: true,

// If true, cover the page with a gray div
cover: true,

// If true, close the dialog when the cover is clicked
cover_closes: true,

// The jQuery easing to use for opening the dialog
ease_open: 'riEaseOutQuart',

// The jQuery easing to use for closing the dialog
ease_close: 'riEaseInQuart',

// If true, remove DOM elements from document after closing
destroy_on_close: true,

// A URL from which to download HTML for the content area 
ajax: false,

// The iframe src to inject into the content area
iframe: false,

// A selector or element to inject into the content area
element: false,

// Text content to inject into the content area
text: false,

ajax_query_suffix: '',
position: 'center-middle',
offset: {x: 0, y: 0},
iframe_query_suffix: 'hexmodal=1',
iframe_poll_interval: 50,

// The html templates to use
html: ''

Change logs:

v1.1 (2015-04-24)

• added onFrame* events
• new demos

2015-03-23

• fix box sizing

---

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