Jesper Holm Damgaard and myself have developed a solid jQuery plugin for displaying content in a modal window. The idea is to select any element in the DOM and show it in a modal window.

Very little javascript code is needed to use the plugin on any website. Still the jQuery Modal Window plugin can be modified in every way. An array of events gives full control of your content in every step of the way.

Compatibility

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

Standard settings

In it’s most basic form the jQuery Modal Window have a standard look. No additional settings is needed unless you want to change something.

Standard settings

There’s a lot of settings to the jQuery Modal Window plugin. Read about them all here:
Modal Window settings

Examples of the standard setup

The first example show how you easily kan show an image on top of a page.
The only way to close this jQuery Modal Window, in this example, is to click the background.

The Second example shows how to open a window with text and other elements. What is put in there is all up to the imagination.
The third example opens up a form.

Javascript

jQuery(document).ready(function () {
  jQuery('#ClickMeStandard').click(function () {
      jQuery('#ShowMeStandard').Co3ModalWindowOpen();
      return false;
    });
});

Example 1: Click here to open a standard jQuery Modal Window with an image
Example 2:Click here to open a standard jQuery Modal Window with a lot of text and stuff
Example 3: Click here to open a standard jQuery Modal Window with a form

Examples of changing the looks

In these examples the background color and opacity has been changed. Also the animation is slower and the margin to the edge og the browser have been changed.

Javascript

jQuery(document).ready(function () {
  var settingsLooks = {
      opacity: 0.9,
      background: '#fff',
      minDistanceToViewport: 50,
      animateTime: 1000
  };
  jQuery('#ClickMeLooks').click(function () {
    jQuery('#ShowMeStandard').Co3ModalWindowOpen(settingsLooks);
    return false;
  });
  jQuery('#ClickMeLooks_AdvancedContent').click(function () {
    jQuery('#ShowMeAdvanced').Co3ModalWindowOpen(settingsLooks);
    return false;
  });
});

Example 4: Click to open an image
Example 5: Click here to open som text
Example 6: Click here to open a form

Examples of using the four events

In these examples the four open and close events are used.

Javascript

jQuery(document).ready(function () {
  var settingsEvents = {
    onOpen: function () { alert("onOpen"); },
    onOpened: function () { alert("onOpened"); },
    onClose: function () { alert("onClose"); },
    onClosed: function () { alert("onClosed"); }
  };
  jQuery('#ClickMeEvents').click(function () {
    jQuery('#ShowMeStandard').Co3ModalWindowOpen(settingsEvents);
    return false;
  });
  settingsEvents = {
    onClosed: function (content) {
      jQuery(content).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').Co3ModalWindowOpen(settingsEvents);
    return false;
  });
});

Example 7: Alert boxes being created for every event
Example 8: Form being reset when you close it

Example of a new way to use the form

This example uses the same form as all previous examples. This time the textarea is disabled. When you click the link below you get to edit the textarea from a new jQuery Modal Window.

Notice I have writen a lot of extra code to create the new functionality. I just use the open and close events og the jQuery Modal Window plugin.

Javascript

jQuery(document).ready(function () {
  var settingsForm2 = { 
          closeOnBlockClick: false,
          opacity: 0.01,
          animateTime: 250
  };
  var settingsForm1 = {
    onOpen: function (content) {
      var skrivTekst = jQuery("<a href='#' id='SkrivTekst' style='cursor:pointer;display:block;'>Klik her for at skrive en tekst i et ny modal vindue</a>").click(function () { jQuery("#showMe_Form2").Co3ModalWindowOpen(settingsForm2); return false; });
      jQuery(content).find("textarea").attr("disabled", "disabled").after(skrivTekst);
    },
    onClosed: function () {
      jQuery(content).find("textarea").attr("disabled", "");
      jQuery(content).find("#SkrivTekst").remove();
    }
  };

  jQuery('#ClickMeForm_Form').click(function () {
    jQuery('#showMe_Form').Co3ModalWindowOpen(settingsForm1);
    return false;
  });
  jQuery(content).find("#SubmitBoth").click(function () {
    jQuery("#showMe_Form textarea").val(jQuery(this).closest("div").find("textarea").val());
    jQuery(this).Co3ModalWindowClose();
    jQuery('#showMe_Form').Co3ModalWindowClose();

  });
  jQuery(content).find("#SubmitOne").click(function () {
    jQuery("#showMe_Form textarea").val(jQuery(this).closest("div").find("textarea").val());
    jQuery(this).Co3ModalWindowClose();
  });
});

Example 9: Open the form

Try it yourself

Here you can fill out your own settings and test them on one of the three content examples.

Javascript

jQuery(document).ready(function () {
  jQuery("#ClickMeTrySelf_Image, #ClickMeTrySelf_Text, #ClickMeTrySelf_Form").click(function () {
    var settingTbl = jQuery("#ClickMeTrySelf_Settings"),
        txtFixedTop = settingTbl.find("#txtFixedTop"),
        txtFixedLeft = settingTbl.find("#txtFixedLeft");
    var settingsTrySelf = {
      onOpen: function (content) { runSomeCode("#txtOnOpen"); },
      onOpened: function (content) { runSomeCode("#txtOnOpened"); },
      onClose: function (content) { runSomeCode("#txtOnClose"); },
      onClosed: function (content) { runSomeCode("#txtOnClosed"); },
      opacity: parseFloat(settingTbl.find("#txtOpacity").val()),
      background: settingTbl.find("#txtBackground").val(),
      minDistanceToViewport: parseInt(settingTbl.find("#txtMinDistanceToViewport").val()),
      zIndex: parseInt(settingTbl.find("#txtZIndex").val()),
      animateTime: parseInt(settingTbl.find("#txtAnimateTime").val()),
      closeOnBlockClick: settingTbl.find("input[name='rdbCloseOnBlockClick']:checked").val() === "1" ? true : false,
      fixedTop: txtFixedTop.val() === "null" ? null : parseInt(txtFixedTop.val()),
      fixedLeft: txtFixedLeft.val() === "null" ? null : parseInt(txtFixedLeft.val())
    };
    switch (this.id) {
      case "ClickMeTrySelf_Image":
        jQuery('#ShowMeStandard').Co3ModalWindowOpen(settingsTrySelf);
        break;
      case "ClickMeTrySelf_Text":
        jQuery('#ShowMeAdvanced').Co3ModalWindowOpen(settingsTrySelf);
        break;
      case "ClickMeTrySelf_Form":
        jQuery('#showMe_Form').Co3ModalWindowOpen(settingsTrySelf);
        break;
    }
    return false;
  });
});

function runSomeCode(eleSelector) {
  try {
    eval("var runCode = " + jQuery(eleSelector).val());
    if (runCode) {
      runCode(content);
    }
  } catch (ex) {
    alert("You made an javascript error:\n" + ex.message);
  }
}

onOpen (function):	function (content) { }
onOpened (function):	function (content) { }
onClose (function):	function (content) { }
onClosed (function):	function (content) { }
opacity (float):
background (css background value):
minDistanceToViewport (integer):
zIndex (integer):
animateTime (integer):
closeOnBlockClick (Boolean):	true false
fixedTop (integer):
fixedLeft (integer):

Example 10: Click to open an image
Example 11: Click to open the text
Example 12: Click to open the form

Do you want to use it?

This plugin has been removed. Instead use the new and improved jQuery Modal Window Plugin

This is the content.

Close the window

Vestibulum sem lacus, consequat eu cursus in, gravida ut erat. Sed fermentum, neque eu luctus eleifend, odio tortor aliquet lacus, ac placerat quam lectus a metus. Sed ac mattis dolor. Quis que viverra elementum lorem. Nam pulvinarhere is the text rutrum mi, ut placerat massa cursus et. Vivamus non interdum libero. Donec congue dolor sit amet diam tempus faucibus. Curabitur eu bibendum mi. Sed vitae metus urna, vitae mattis odio. Praesent vestibulum semper tellus, in scelerisque turpis tempor in.

Vestibulum in nisi quam, sit amet varius velit. Fusce congue sem quis mi adipiscing varius. Praesent tincidunt neque consequat sem dapibus ut porttitor dolor vehicula. Nunc pretium velit eget augue sodales sagittis. Fusce ut dolor ante, eget porta est. Sed nec libero nibh, quis interdum felis. Aenean interdum dapibus arcu non adipiscing. Vestibulum mollis eros sed eros pulvinar ullamcorper suscipit sem varius. In non mi sem. Quisque nec pretium leo.

Vestibulum

in nisi quam, sit amet varius velit. Fusce congue sem quis mi adipiscing varius. Praesent tincidunt neque consequat sem dapibus ut porttitor dolor vehicula. Nunc pretium velit eget augue sodales sagittis. Fusce ut dolor ante, eget porta est. Sed nec libero nibh, quis interdum felis. Aenean interdum dapibus arcu non adipiscing. Vestibulum mollis eros sed eros pulvinar ullamcorper suscipit sem varius. In non mi sem. Quisque nec pretium l

Name:
Password:
Chose a value:	Value 1 Value 2 Value 3
Chose some other value:
A textfield:

OLD - jQuery Modal Window

Compatibility

Standard settings

Standard settings

Examples of the standard setup

Javascript

Examples of changing the looks

Javascript

Examples of using the four events

Javascript

Example of a new way to use the form

Javascript

Try it yourself

Javascript

Do you want to use it?

This is the content.

Vestibulum

ibulum

Vestibulum

ibulum

Vestibulum

ibulum

Vestibulum

ibulum

Form

Search the blog

Categories

Recent posts

Archive

OLD - jQuery Modal Window

Compatibility

Standard settings

Standard settings

Examples of the standard setup

Javascript

Examples of changing the looks

Javascript

Examples of using the four events

Javascript

Example of a new way to use the form

Javascript

Try it yourself

Javascript

Do you want to use it?

This is the content.

Vestibulum

ibulum

Vestibulum

ibulum

Vestibulum

ibulum

Vestibulum

ibulum

Form

Search the blog

Rune on the web

Categories

Recent posts

Archive