$.modal.open('This is some content');
<div class="modal-overlay"></div>
<div class="modal">
<div class="modal-content">
<!-- content -->
</div>
<a href="#" class="modal-close">close X</a>
</div>
This was written to address some issues I've experienced when working with a number of existing modal plugins:
- It dynamically sizes the modal based on it's final state, so any styles applied based on .modal * will be taken into account and the modal correctly sized.
- It avoids the use of fixed positioning to ensure users can always get to the content even if it's outside of the viewport which also means it supports touch devices and IE6.
- It allows extra classes to be added to the container element (not just the content element) to easily change and extend different 'skins'.
- It provides a constructor function to allow for multiple instances.
- It correctly positions itself on touch devices, even when zoomed in.
Defines the width of the modal, if set to 'auto' the width will be automatically calculated based on size of content
Defines the height of the modal, if set to 'auto' the height will be automatically calculated based on size of content
Defines the maxium width of the modal
Defines the maxium height of the modal
If set to true the modal will be sized to fit within the viewport
If set to true the modal will maintain it's original aspect ratio if / when resized
If set to true the page will blocked with an overlay div to stop interaction
Defines speed modal will fade in. Can take any standard jQuery speed strings or number
Defines speed modal will fade out. Can take any standard jQuery speed strings or number
Defines text to be applied to close element
Defines any extra space seperated classes to be added to the outer .modal element
Allows final modal position to be overridden if centering is not desired
Any elements wihtin the modal matching the closeSelector will close the modal on click
Keycode used to close the modal, default to Esc key
Defines whether clicking on the overlay will close the modal
Defines the overlay opacity; it's within JS and not CSS to a) take advantage of jQuery's cross browser opacity normalisation and b) because <= IE7 can't fadeIn translucent elements
{
modal (jQuery object)
content (jQuery object)
closeBtn (jQuery object)
overlay (jQuery object)
}
See tin
See tin
See tin
See tin
See tin
Displays content in modal using options, content can be a selector, element, HTML string, or jQuery object (anything $.fn.append() can take)
Repositions modal, useful if content has changed
Replaces modal content with newContent, unlike $.modal(), options persist
Helper method to show modal in a loading state, use .modal-isloading for styling. A function can be passed in to be called before close; this can be useful if ajax request needs to be aborted
Closes modal, pass in boolean to define whether close should fade out
Removes modal from DOM and unbinds all associated events
Creates new instance of $.rs.Modal where name (string) is used as a prefix for the generated mark-ups classNames and defaults (object) is merged in with the above options to specialise the instance.
var myModal = new $.rs.Modal('mymodal', {
maxWidth: 500,
maxHeight: 600,
fitViewport: true,
closeText: 'X'
});
myModal.open('this is some content');
// Generated mark-up
<div class="mymodal-overlay"></div>
<div class="mymodal">
<div class="mymodal-content">
<!-- content -->
</div>
<span class="mymodal-close">X</span>
</div>