This was written to address some issues I've experienced when working with a number of existing modal plugins
$.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:
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>