Extremely customizable modal window plugin for jQuery with 150 lines of code, written specially for programmers.
Make minimum actions to use OmniWindow:
<!-- Include both jQuery and plugin libs: -->
<script type="text/javascript" src="...jquery.js"></script>
<script type="text/javascript" src="...jquery.omniwindow.js"></script>
<!-- Container for an overlay: -->
<div class="ow-overlay ow-closed"></div>
<!-- Container for a modal window: -->
<div class="modal ow-closed">Hello, human!</div>
/* Default class for an overlay */
.ow-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #424242;
opacity: 0.8;
}
/* Default class for both hidden overlay and modal window */
.ow-closed {
display: none;
}
/* Default class for modal window */
.modal {
position: fixed;
z-index: 20;
height: 300px;
left: 50%;
top: 50px;
width: 300px;
background-color: #fff
}
$(function(){
$('div.modal').omniWindow() // create modal
.trigger('show'); // and show it
});
If you want to use your own names for modal and overlay classes, you can set them as options. OmniWindow provides the following options to do that:
$('div.another-modal').omniWindow({
overlay: {
selector: '.custom-overlay', // don't forget the period symbol!
hideClass: 'custom-overlay-closed'
},
modal: {
hideClass: 'custom-modal-closed'
}
});
OmniWindow uses two events to show and hide windows. You can trigger this events any time you need.
For example, you can trigger hide event to create your own close button.
<div class="modal ow-closed">
<h1>Close me!</h1>
<a class='close-button' href='#'>X</a>
</div>
var $modal = $('div.modal').omniWindow();
// ...
$modal.trigger('show');
// ...
$('.close-button').click(function(e){
e.preventDefault();
$modal.trigger('hide');
});
You can redefine event names as you wish, but remember about jQuery namespaces! It's convenient way to unbind only necessary events.
Plugin also has two additional event listeners:
Don't touch options with internal keys if you don't know what you are doing.
When omniWindow instance is hidden, it listens only for 'show' event.
Don't use events to break OmniWindow behaviour, if you need to stop some action just use callbacks!
There are two groups of callbacks: animation callbacks and lifetime callbacks. Each callback has two parts: user part and internal part.
Any user callback can be described in the same way:
function(subjects, internalCallback) {
// some actions
return internalCallback(subjects);
}
You can do something with modal or overlay containers in your callbacks:
function(subjects, internalCallback) {
subjects.overlay.addClass('foo-bar'); // feel free to use any jQuery methods
return internalCallback(subjects);
}
Always call internalCallback(subjects); at the end of your callback to prevent a lot of errors!
You can define any kind of animations you want. Just use one (or all) of this callbacks:
For example, if you want use fade effects for overlay, you need to redefine overlay.animations.show and overlay.animations.hide callbacks:
$('div.modal').omniWindow({
overlay: {
animations: {
hide: function(subjects, internalCallback) {
subjects.overlay.fadeOut(250, function(){
internalCallback(subjects); // call internal callback
})
},
show: function(subjects, internalCallback) {
subjects.overlay.fadeIn(250, function(){
internalCallback(subjects); // call internal callback
});
// etc
It's not necessary to return some values from animation callbacks.
Here is a list of internal animations, which are called after user-defined animations:
If you plan to play with internal animations for some reason, please don't use animations with timers there!
What will be first: overlay show animation or modal show? You shouldn't guess: it is under your control with animationsPriority option:
According to default settings animations will appear in following order: show overlay -> show modal -> hide modal -> hide overlay.
Lifetime callbacks are five useful functions created to simplify your life! Meet them:
There is an example of callbacks.beforeHide, used to validate input: user should fill in the textbox before closing the window. callbacks.afterShow provides logic to clear field and disable error each time window shows.
<div class="modal ow-closed">
<input name="fill_me" type="text" value="" />
<div class="error">Please fill this field before closing!</div>
</div>
$('div.modal').omniWindow({
callbacks: {
afterShow: function(subjects, internalCallback) {
subjects.modal.find('input').val('').focus();
subjects.modal.find('div.error').hide();
return internalCallback(subjects); // call internal callback
},
beforeHide: function(subjects, internalCallback) {
var $input = subjects.modal.find('input');
if ($input.val().length == 0) {
subjects.modal.find('div.error').show();
$input.focus();
return false; // doesn't allow to hide!
} else {
return internalCallback(subjects); // call internal callback
}
// etc
$(...).trigger('show');$(...).trigger('hide');