Rune Grønkjærs Blog
Abonnér på mit feed
Home

jQuery Modal Window plugin

by Rune Gronkjaer | Published August 31, 2010 | Læs denne side på dansk dansk version
Herby the reproduction of the Modal Window plugin. This time in a version written entirely by myself.

jQuery Modal Window is composed of two parts. A jQuery plugin part and a controller class used to manage the jQuery Modal Window and its contents.

Very little code have to be written to implement the jQuery Modal Window on a website. A large number of optional settings has been made accessible for the user to influence the look and feel of the plugin.

jQuery Modal Window compatibility

The jQuery Modal Window plugin has been tested in IE6 and all newer browsers and uses jQuery 1.4.2.

Documentation

There are some options to Modal Window plugin. See them and read about the API on this page:
jQuery Modal Window documentation

Standard Configuration

In its most basic form the Modal Window has a standard appearance with the default settings. It is not necessary to submit your own settings, unless you want to change anything.

Examples of default configuration

The first example shows how simply you can display an image on top of a piece of sandwich paper.
The only way to close the Modal Window in this example is by clicking the background.
The second example shows similarly how to open a window with text and other html elements. What you put in it is entirely up to your imagination.
The third example opens a form that can then be submitted.

Javascript

jQuery(document).ready(function () {
  jQuery('#ClickMeStandard').click(function () {
    jQuery('#ShowMeStandard').openModalWindow();
    return false;
  });
  jQuery('#ClickMeStandard_AdvancedContent').click(function () {
    jQuery('#ShowMeAdvanced').openModalWindow();
    return false;
  });
  jQuery('#ClickMeStandard_Form').click(function () {
    jQuery('#showMe_Form').openModalWindow();
    return false;
  });
  jQuery('.openNewWindowButton').live("click", function () {
    jQuery('#ClickMeStandard').click();
    return false;
  });
  jQuery('#ShowMeAdvanced .closeModalWindow').live("click", function () {
    jQuery(this).closeModalWindow();
    return false;
  });
  jQuery('#Close, #Submit').live("click", function () {
    jQuery(this).closeModalWindow();
    return false;
  });
});
Example 1: Click here to open a standard Modal Window with a picture
Example 2: Click here to open a standard Modal Window with a lot of text and stuff
Example 3: Click here to open a standard Modal Window in a form

Examples of change in appearance

In these examples the sandwich paper color and opacity is changed. We also determine that the animation should take one second instead of half a second as in the standard edition.
Finally, we set the margin to your browser’s edge to 50 pixels, so we always have a certain distance.

Javascript

jQuery(document).ready(function () {
  var settingsLooks = {
    backgroundOpacity: 0.9,
    backgroundBackground: '#fff',
    minDistanceToBrowserEdge: 50,
    animateTime: 1000
  };
  jQuery('#ClickMeLooks').click(function () {
    jQuery('#ShowMeStandard').openModalWindow(settingsLooks);
    return false;
  });
  jQuery('#ClickMeLooks_AdvancedContent').click(function () {
    jQuery('#ShowMeAdvanced').openModalWindow(settingsLooks);
    return false;
  });
  jQuery('#ClickMeLooks_Form').click(function () {
    jQuery('#showMe_Form').openModalWindow(settingsLooks);
    return false;
  });
});
Example 4: Click here to open a photo
Example 5: Click here to open a lot of text and stuff
Example 6: Click here to open a form

Examples of the use of the four events

In these examples we make use of four open and closeevents.

Javascript

jQuery(document).ready(function () {
  var settingsEvents = {
    onOpen: function () { alert("onOpen"); },
    onOpened: function () { alert("onOpened"); },
    onClose: function (mwc) { alert("onClose"); mwc.deconstruct(); },
    onClosed: function () { alert("onClosed"); }
  };
  jQuery('#ClickMeEvents').click(function () {
    jQuery('#ShowMeStandard').openModalWindow(settingsEvents);
    return false;
  });
  var settingsEvents2 = {
    onClosed: function (mwc) {
      jQuery(mwc.modalContent).find("input:not([type=button]), textarea, select").each(function () {
        this.value = this.defaultValue;
        jQuery(this).removeAttr('checked');
      });
    }
  };
  jQuery('#ClickMeEvents_Form').click(function () {
    jQuery('#showMe_Form').openModalWindow(settingsEvents2);
    return false;
  });
});
Example 7: Alert boxes are made for each event
Example 8: Form which will be reset when you close it.

Try it yourself

You can try to fill in the settings and then run an jQuery Modal Window with your own settings. Preferences will be dynamically loaded from jQuery Modal Window’s default settings .

Do the following

  1. Change the options you want
  2. Choose one of the examples in the settings and click on it
Example 9: Click here to open a photo
Example 10: Click here to open a lot of text and cases
Example 11: Click here to open a form

Do you want to use it?

You may freely use my plugin. If you are kind link back to my page, from where you use it. Download my packaged version here:

Dansk version