Lightweight and Simple jQuery Modal Window Plugin - OmniWindow

File Size: 15.2 KB
Views Total: 2999
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight and Simple jQuery Modal Window Plugin - OmniWindow

OmniWindow is a jQuery plugin developed for programmers that allow to create customizable and animated modal windows with callbacks and events support. By default, users can click on the overlay or press ESC key to close the window.

Basic Usage:

1. Load the latest jQuery javascript library and jQuery OmniWindow plugin on your web page

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.omniwindow.js"></script>

2. Create the container for the overlay and modal window

<div class="ow-overlay ow-closed"></div> 
<div class="modal ow-closed">Hello, World!</div>

3. The CSS

/* 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
}

4. Call the plugin

$(function(){
  $('div.modal').omniWindow() // create modal
    .trigger('show'); // and show it
});

5. Possible plugin options and callbacks.

animationsPriority: {
  show: ['overlay', 'modal'],
  hide: ['modal', 'overlay']
},
overlay: {
  selector: '.ow-overlay',
  hideClass: 'ow-closed',
  animations: {
    show: function(subjects, internalCallback) { return internalCallback(subjects); },
    hide: function(subjects, internalCallback) { return internalCallback(subjects); },
    internal: {
      show: function(subjects){ subjects.overlay.removeClass(options.overlay.hideClass); },
      hide: function(subjects){ subjects.overlay.addClass(options.overlay.hideClass); }
    }
  }
},
modal:   {
  hideClass: 'ow-closed',
  animations: {
    show: function(subjects, internalCallback) { return internalCallback(subjects); },
    hide: function(subjects, internalCallback) { return internalCallback(subjects); },
    internal: {
      show: function(subjects){ subjects.modal.removeClass(options.modal.hideClass); },
      hide: function(subjects){ subjects.modal.addClass(options.modal.hideClass); }
    }
  },
  internal: {
    stateAttribute: 'ow-active'
  }
},
eventsNames: {
  show: 'show.ow',
  hide: 'hide.ow',
  internal: {
    overlayClick:  'click.ow',
    keyboardKeyUp: 'keyup.ow'
  }
},
callbacks: {                                                                                  // Callbacks execution chain
  beforeShow:  function(subjects, internalCallback) { return internalCallback(subjects); },   // 1 (stop if returns false)
  positioning: function(subjects, internalCallback) { return internalCallback(subjects); },   // 2
  afterShow:   function(subjects, internalCallback) { return internalCallback(subjects); },   // 3
  beforeHide:  function(subjects, internalCallback) { return internalCallback(subjects); },   // 4 (stop if returns false)
  afterHide:   function(subjects, internalCallback) { return internalCallback(subjects); },   // 5
  internal: {
    beforeShow: function(subjects) {
      if (subjects.modal.data(options.modal.internal.stateAttribute)) {
        return false;
      } else {
        subjects.modal.data(options.modal.internal.stateAttribute, true);
        return true;
      }
    },
    afterShow: function(subjects) {
      $(document).on(options.eventsNames.internal.keyboardKeyUp, function(e) {
        if (e.keyCode === 27) {                                              // if the key pressed is the ESC key
          subjects.modal.trigger(options.eventsNames.hide);
          subjects.overlay.css('display', '');  // clear inline styles after jQ animations
          subjects.modal.css('display', '');
        }
      });

      subjects.overlay.on(options.eventsNames.internal.overlayClick, function(){
        subjects.modal.trigger(options.eventsNames.hide);
        subjects.overlay.css('display', '');  // clear inline styles after jQ animations
        subjects.modal.css('display', '');
      });
    },
    positioning: function(subjects) {
      subjects.modal.css('margin-left', Math.round(subjects.modal.outerWidth() / -2));
    },
    beforeHide: function(subjects) {
      if (subjects.modal.data(options.modal.internal.stateAttribute)) {
        subjects.modal.data(options.modal.internal.stateAttribute, false);
        return true;
      } else {
        return false;
      }
    },
    afterHide: function(subjects) {
      subjects.overlay.off(options.eventsNames.internal.overlayClick);
      $(document).off(options.eventsNames.internal.keyboardKeyUp);
      subjects.overlay.css('display', '');  // clear inline styles after jQ animations
      subjects.modal.css('display', '');
    }
  }
}

Change log:

v1.0.1 (2016-01-26)

  • Bump version after bugfix. 

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