Responsive Flexible jQuery Modal Window Plugin - RiModal
File Size: | 22.4 KB |
---|---|
Views Total: | 1622 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.