Learning jQuery

In this post, I am going to share you that how to create Modal window with ease using jQuery. In fact as a programmer, you don't have to do much. Yes, it is possible with jQuery plugin called "OmniWindow" This plugin is extremely customizable modal window plugin with 139 lines of code, written specially for programmers.

Main Ideas

• Modal window is not an image gallery.
• HTML and CSS should be outside of the plugin code.
• You can decide yourself which animations will annoy user's eyes.
• Magic numbers and tons of options? Not here.
• Callbacks are good for javascript.
• Default behaviour should be unobtrusive.
• 150 lines of code are enough for modal window plugin.

How to use it?

Download the plugin and include reference of its library along with jQuery. The very basic and minimal use of this plugin is,

HTML code

//Code Starts
<!-- Container for an overlay: --> 
<div class="ow-overlay ow-closed"></div> 

<!-- Container for a modal window: --> 
<div class="modal ow-closed">Hello, human!</div>
//Code Ends

Define CSS class used for modal window.

//Code Starts
/* 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 hidden windows */
.ow-closed {
  display: none;
}

/* User-defined style */
.modal {
  height: 300px;
  width: 300px;
}
//Code Ends

jQuery code is:

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

This plugin comes with many more options, events and callback function, which makes this plugin highly customizable.

Feel free to contact me for any help related to jQuery, I will gladly help you.