SimpleModal v.1.1.1

v1.1.1

Deprecated: please see the current version.

Summary

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Demos

Tests

Download

Support

Usage

As a jQuery chained function, where data is a jQuery object:

data.modal([options]);
Examples:
$('<div>my data</div>').modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});

As a stand-alone jQuery function, where data is a jQuery object, a DOM element, or a plain string (which can contain HTML):

$.modal(data, [options]);
Examples:
$.modal('<div>my data</div>', {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});

Styling

  • New in 1.1, there are two options that enable you to pass in CSS attributes for the modal overlay and container. They are overlayCss and containerCss and take a key/value object of properties. See the jQuery CSS Docs for details.
  • In addtion to the new options, SimpleModal now handles settings some of the critical CSS properties, to prevent having to define them in external CSS files.
  • SimpleModal internally defines the following CSS classes:
    • modalOverlay: used to style the overlay div – helpful for applying common styles to different modal dialogs
    • modalContainer: used to style the container div – helpful for applying common styles to different modal dialogs
    • modalData: (Added in v1.1.1) used to style the data element – helpful for applying common styles to different modal dialogs
    • modalCloseImg: used to style the built-in close icon
Sample CSS, using default values
#modalOverlay {
  background-color:#000;
  cursor:wait;
}

#modalContainer {
  height:400px; 
  width:600px; 
  left:50%; 
  top:15%; 
  margin-left:-300px; /* half the width, to center */
  background-color:#fff; 
  border:3px solid #ccc;
}

#modalContainer a.modalCloseImg {
  background:url(../img/x.png) no-repeat; 
  width:25px; 
  height:29px; 
  display:inline; 
  z-index:3200; 
  position:absolute; 
  top:-14px; 
  right:-18px; 
  cursor:pointer;
}
  • For IE 6, the following will handle the PNG used for a.modalCloseImg and container positioning:
<!--[if lt IE 7]>
<style type='text/css'>
  #modalContainer a.modalCloseImg{
    background:none; 
	right:-14px; 
	width:22px; 
	height:26px; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/x.png', sizingMethod='scale'
      );
  }
  #modalContainer {
    top: expression((document.documentElement.scrollTop 
        || document.body.scrollTop) + Math.round(15 * 
        (document.documentElement.offsetHeight 
        || document.body.clientHeight) / 100) + 'px');
  }
</style>
<![endif]-->

Options

Both of the SimpleModal modal() functions accept an optional options object, which can contain any/all of the following (default value):

  • overlay: (50) The opacity value, from 0 – 100. 0 = transparent 100 = opaque
  • overlayId: (‘modalOverlay’) The DOM element id for the overlay div
  • overlayCss: ({}) The CSS styling for the overlay div
  • containerId: (‘modalContainer’) The DOM element id for the container div
  • containerCss: ({}) The CSS styling for the container div
  • close: (true) Show the default window close icon? Uses CSS class modalCloseImg
  • closeTitle: (‘Close’) The title value of the default close link. Used if close == true
  • closeClass: (‘modalClose’) The CSS class used to bind to the close event
  • persist: (false) Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state
  • onOpen: (null) The callback function called in place of SimpleModal’s open function
  • onShow: (null) The callback function called after the modal dialog has opened
  • onClose: (null) The callback function called in place of SimpleModal’s close function

Callbacks

The callback functions are called using the JavaScript apply function. One parameter, the dialog object, is sent, which contains the overlay, container, data and iframe objects. In addition, inside the callback, this will refer to the SimpleModal object, which will allow you to access all of the available modal elements and functions.

  • onOpen: Useful for adding effects to the opening of the modal dialog elements. Your callback function will be passed an object that contains the overlay, container, data, and iframe (for IE6) elements. SimpleModal will handle “showing” the iframe, if necessary.
Example
data.modal({onOpen: function (dialog) {
  dialog.overlay.fadeIn('slow', function () {
    dialog.container.slideDown('slow', function () {
      dialog.data.fadeIn('slow'); // See Other Notes below regarding
                                     // data display property and
                                     // iframe details
    });
  });
}});
  • onShow: Useful for binding events or any other actions you might want to perform after the modal dialog elements have been displayed. Your callback function will be passed an object that contains the overlay, container, data, and iframe (for IE6) elements.
  • onClose: Useful for adding effects to the closing of the modal dialog elements. Your callback function will be passed an object that contains the overlay, container, data, and iframe (for IE6) elements. After you’ve applied effects, etc., you’ll need to call $.modal.close();.
Example
data.modal({onClose: function (dialog) {
  dialog.data.fadeOut('slow', function () {
    dialog.container.slideUp('slow', function () {
      dialog.overlay.fadeOut('slow', function () {
        $.modal.close(); // must call this to have SimpleModal
                         // re-insert the data correctly and
                         // clean up the dialog elements
      });
    });
  });
}});

Other Notes

iframe
  • For IE6, SimpleModal handles the creation and removal of an iframe, which is needed to prevent select options from bleeding through the modal dialog. If you use an onClose callback, see onClose in the Callback section above.
Data CSS Display Property
  • SimpleModal “hides” the data when it adds it to the modal dialog. If you use an onOpen callback, the dialog.data display value will have been set to none and you’ll need to explicitly “un-hide” the element.
Cloning and Element Removal
  • By default, SimpleModal will clone the data element that you pass in. When the dialog is closed, the cloned, unchanged, data element will be re-inserted into DOM in its original place. If persist is true, SimpleModal will “re-insert” the original element, with changes intact. If you use an onClose callback, see the onClose in the Callback section above.
  • SimpleModal always removes the overlay, container and iframe elements when closed. If you use an onClose callback, see onClose in the Callback section above.
Known Issues
  • The modal dialog will not display properly in IE7 if used in quirksmode. Fixed
Browser Compatibility

SimpleModal has been tested in the following browsers:

  • IE 6, 7
  • Firefox 2
  • Opera 9
  • Safari 3

267 thoughts on “SimpleModal v.1.1.1”

  1. andres

    Hi, I have a doubt. Could I use two callback in the same time, because it will be helpfull to me to use onOpen and onClose.
    Thanks!!!

  2. Eric Martin

    @andres – Yes, you can. You can use all of the callbacks together, if you like.

    Example:

    $('#someElement').modal({
    onOpen: myOpenFunction,
    onShow: myShowFunction,
    onClose: myCloseFunction
});
  3. David

    Hi Eric.
    Your plugin it’s excelent.
    It’s possible some more demo for beginers
    Thank you
    David O.

  5. David

    Hi Eric.
    I have 2 question:
    1. It’s possible nested modal window?
    2. how define containerCss: ({}) The CSS styling for the container div ?
    it’s possible example ?
    Thank you
    David O.

  6. Eric Martin

    @David –
    1) No, it is not possible to nest modal windows. If you have a compelling reason to do this, let me know and I’ll consider adding that ability.

    2) There would be two reasons to use containerCss and/or overlayCss. a) you don’t want to use an external stylesheet to style to modal dialog and b) you want to override values from an external stylesheet.

    Example:

    $('#modalContentTest').modal({
	containerCss: {backgroundColor: '#ff0000', border: '6px solid #000'},
	overlayCss: {backgroundColor: '#fff'}
});
  8. Andrey Sterlin

    Good work! Thanks!

    I think it more useful to change

    left:588px; in #modalContainer a.modalCloseImg

    for

    right:-15px;

  9. Dmitry

    I found memory leak problem in IE. This problem occur practically in all simular plugins. It’s no good.

  10. Eric Martin

    @Roger – Glad you like it!

    @Andrey – Good suggestion. I’ll update the CSS and documentation.

    @Dmitry – Care to elaborate? What is the leak, how did you identify it, etc.

  13. Logan

    great thanks, but it throw an error when call $.modal.close(); to close the modal window after it has been closed by clicking on the click link manually.
    I am wondering if you could add a condition within the close function to detect if the modal window still alive before any further.
    or if you could provide me a solution to check whether the modal window is alive.
    thanks

  14. Eric Martin

    @Logan – good point 😉 I’ll need to fix that. All you need to do is add the following in the close function:

    if (!this.dialog.data) {
	return false;
}

    So, you should end up with:

    close: function (external) {
	if (!this.dialog.data) {
		return false;
	}

	if ($.isFunction(this.opts.onClose) && !external) {
		...
	}

	...

}

    UPDATE: Fixed in the 1.1.1 release

  16. Hannan

    wow, excelent…

    Your plugins is cool, but can we make the modal dialog shows centered on the page with eazy?
    (i’m sory for my bad english)

    thnx.

  18. Eric Martin

    @Hannan – Thanks! Are you asking about horizontal or vertical centering? All of the examples (tests and demos) have dialogs that are horizontally centered on the page.

    @kadir – What is the problem that you are having? Just the opacity of the “container”? If so, you could just do something like:

    $('#modalContent').modal({
	containerCss: {opacity: .4}
});

    Since the data is inside the container, it will inherit the opacity value as well. This requires v1.1.

  20. kadir doğan

    hi again,

    the problem is that the embedded video playing at the background disappears when the modal window appears.
    my screenshot contains the scene I’d like to achieve.
    do you know any workaround to bypass this problem?
    thanks in advance.

  21. dong

    I’d like embed your script into Drupal but unfortunately, your script not runs with jQuery old version 1.1.2. Can you show me how your script run with jQuery 1.1.2?

    Thanks a lot.

    Dong

  22. Eric Martin

    @kadir – what browser are you using? The sample I showed should work unless the video itself is doing something funny.

    @dong – SimpleModal is compatible with jQuery 1.1.2. If you are trying to use the contact form, the animations require jQuery 1.2+. Let me know…

  23. kadir doğan

    i’m using firefox 2.0.0.11. i tested for youtube video player (simplemodal on a embeded SWF) and it worked. But neither VLC nor Media Player not worked. in our application, we are supposed to use vlc plugin on firefox for playing media.

  25. Guillaume

    Hello ! Nice plugin you have here ! 🙂

    Maybe it’s really obvious but I was wondering how I could pass a variable to $.get(“./simplemodal/data/myform.php”, function(data) {}
    so that it calls myform.php?var=xx where the xx is something I have in the URL of the main page (eg $_REQUEST[‘var’] in php). I hope I’m clear 🙂

    Thanks
    G.

  26. Guillaume

    ok I think I’ve found a solution using a hidden input field and accessing it thanks to its id within the get call 🙂

    $.get(‘./simplemodal/data/myform.php?itw=’+$(‘#numint’).val(), function(data){…}

  27. elvis

    I just admire people who can make this kind of js. Just I can’t close my jaws and saying wow.
    I am a beginner and please excuse my elementary question. I installed the contact form in my testing website, and looks great, but it doesn’t send email. How can I make it to send email? Do I need to put any code or modify any php? If I will be grateful if someone can help a newbie.
    Regards.

  28. Jatin

    Hi Eric, this is an excellent light weight plug-in. Is it possible to have the popup vertically centered? I noticed the window is controlled by the top and left values in CSS, but it would be good if it would stay in the centre of the browser (to maximise real estate and have no gaps at the top or left on small screen resolutions). Thanks for your help.

  29. Eric Martin

    @Guillaume – glad you got it worked out 😉

    @elvis – when you say it doesn’t send email, what exactly is happening. Does it say it it was sent or that there was a problem? Double check the “To:” email address. Contact me directly to troubleshoot.

    @Jatin – Currently it is set to be 15% from the top, but you can simply change the CSS, according to your needs:

    #modalContainer {
  height:400px;
  width:600px;
  left:50%;
  top:50%;
  margin-left:-300px; /*half the width, to center */
  margin-top:-200px; /* half the height, to center */
  background-color:#fff;
  border:3px solid #ccc;
}

    You’ll need to update the IE CSS as well…

  31. Bruce

    Is it possible to load a pdf file or a web page held at another website into a modal dialog? If so, any chance of example code?

    Thanks/Bruce

  32. matt

    i have integreated your contact but cannot seem to get the dialog to load when i click the button. I have scanned over code and included all files needed for inclusion but still i cannot get the dialog to pop up. Is there anything further needed for the dialog to pop up?

  33. Eric Martin

    @Neil – thanks, I appreciate the kind words!

    @Bruce – it is possible, by embed it into an object/embed tag. I used a file from scribd.com and was able to get it to display.

    @matt – are you using the code from the demo? Do you have a link that I can see? You can contact me privately, if you like.

  34. chris

    I seem unable to be able to call the script on unload of a window? I imagine this is my fault either doing it wrong or not understanding the limitations of the language/script, but I would very much appreciate any direction you can offer. I love the functionality, and its exactly what I have quite a few clients asking for. I imagine it would look something like this

    $(window).unload( function () {
    $('#Content').modal();
    });

    Thanks much.

  35. kadir doğan

    I was testing with a YouTube video. I’ll try the other ones and get back to you.

    Hi Eric,

    Could you test it?

  36. john

    Hello, thank you for putting this together. I have been looking hi and low for just this thing. Perfect. We all owe you one man.

    Anyway, my question is can you have two or more simple windows going at the same time, one would be lets say 300px by 400 and another sized diffrents for a diffrent purpose.

    Also is it possible to change the class name #modalContainer to something that is more unique? One app I am working on will be a widget that will be placed on many other website that are out of my control. Chances somebody else having a modalContainer class name could exist. Thank you again.

  37. Eric Martin

    @chris – if you are trying to catch when a user leaves a page or closes the window, you need to use the onbeforeunload event. It has it’s own built-in dialog, so as far as I know, it would be difficult (if not impossible) to display a modal dialog in place of the built-in confirmation. I spent some time trying something similar in an app, and ended up just using the built-in dialog.

    @kadir – sorry for the delay. I tried out a few tests last night and I couldn’t get a transparent div to show the video (vlc or mov) behind it. It must be a limitation of the embedded video player itself.

    @john – i’ve had a few request for this recently. It would take some re-design of SimpleModal and I’d still need to understand the exact requirements. For example:

    – the first instance creates the overlay, container and data div
    – the second instance creates an additional container and data div, with a different z-index, but does not create an additional overlay.

    Does that sound right? I’d guess that would require the ability to “move” the containers as well? Or would it just be up to the CSS positioning?

    Contact me with ideas/input and I’ll see if I can put something together…

    As for your last question…the class name is hard coded, but you can change the ID of the element when you create it $.modal(elem, {containerId:'myUniqueId'})

  38. Vadim

    About nested (or multiple) modal windows request…
    It will be quit useful (actually I am looking for this feature as well). Example from the real life… I use your modal window to display the list fo private messages for a user and I would like provide ability to respond without exiting the list of messages.

  39. Adrian Labastida

    Hi Eric, great plugin you got there!!

    I just have a question, im using your plugin to put a modal alert on my site, i based on the confirm demo, so its a copy/paste and just some edition on it… now the issue that i have is that on IE7 i cannot get the overlay to cover the full area of the site, it just covers the first visible area of the page, what could be doing that?

    I mean i got the confirm.css and confirm_ie.css files just edited a bit of the colors and thats it, but i cannot get the same overlay coverage on my site than in your example… any suggestions?

    This just happens with IE7, FF is working great.

    Thanks!

    Adrian

  40. Eric Martin

    @Adrian – I just double checked the demo and it works correctly, so it must be something in your page. What DOCTYPE are you using? Do you have any CSS applied to body or html?

  41. Adrian Labastida

    There isnt any css applied neither to body nor html, and there aren’t any DOCTYPE declared, do i have to have one to make it work correctly?

    Thanks Eric!

  43. Adrian Labastida

    Ok i did put a DOCTYPE for it, the line i added at the beginning of the jsp is:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    But im having the same issue, the overlay div is only at the size of what i can see, but if i move the scroll down or right i see the elements below not covered by the div and i can click on them… do you have a suggestion to apply some sort of style to the created overlay div to fix this?

    Thanks!
    Adrian

  45. Todor Stefanov

    Hi Eric,
    I also need ‘nested modals’ feature. I need it to update an entry form modal ‘records list’.

    Thanks!
    Todor

  46. Adrian Labastida

    Eric, i made it! It worked ok using the methods Screen.getDocumentHeight, and Screen.getDocumentWidth from https://www.javascripttoolbox.com/lib/util/documentation.php just integrated those methods and modified the jquery.simplemodal.js in the function fixIE section to make it to work, just changed the vars:

    fixIE:function(){var wHeight=Screen.getDocumentHeight()+’px’;var wWidth=Screen.getDocumentWidth()+’px’;

    it works great!!
    Regards!
    Adrian!!

  47. senthil

    I use your modal window for displaying alert and confirm message.. Its really working great.. thanks a lot for your work..

    i have a small issue.. in small screens, the ok button goes below the screen visible area, and scolling doesnt help, as the modal window also gets adjusted accordingly and still ok button is not displayed..

    Is there any way to prevent adjustment of modal window?

  48. Adrian Labastida

    Eric, Adrian here again, i have another question for you…

    Nowadays with the actual overlay of your simplemodal tool, you can select the elements below it using the tab button and execute its functions, is there a way to avoid it without blocking the tab key with JS?

    Thanks!!
    Adrian

  50. Lee

    this is a trivial issue, but I’ve tweaked the css and js and can’t seem to find the cause:

    i borrowed the x.png image from ‘basic’ example and used in it ‘contact form’ example. Everything works as expected when I click x.png image except the x.png image fades out about .5 second after the form – the delay is noticeable. Obviously I’d like them both to fade out simultaneously.

    Can you point me in a direction to find the cause. Thanks, great plugin.

Comments are closed.

Scroll to Top