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. Gabriel Sobrinho

    @Eric:


    body {
    color: #333;
    font: 8pt Arial;
    padding: 10px;
    width: 100%;
    height: 100%;
    margin: 0;
    }

    The #modalOverlay use “position: fixed;” and this dont work in IE6. I trying to use expression, used in #modalContainer, but dont have success.

    I used the page with lot of content, and this generate scroolbar. If you down the scroolbar, the overlay isnt fixed (the bug of “position: fixed;”).

    Check this, and you see 😉

    I trying to solve this problem, if i do, post this here…

    Tks

  5. Eric Martin

    @Paul – I was able to get it working using the onShow callback. I took the HTML code (#list1a) from the accordion demo page, and have the following JS:

    <script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.dimensions.js'></script>
<script type='text/javascript' src='jquery.accordion.js'></script>
<script type='text/javascript' src='jquery.simplemodal.js'></script>

<!-- from accordion demo page -->
<link href='demo.css' type='text/css' rel='stylesheet'></link>

<!-- simplemodal style -->
<link href='modal.css' type='text/css' rel='stylesheet'></link>

<script type='text/javascript'>
$(document).ready(function () {
   $("#test1").click(function () {
      $("#list1a").modal({onShow: function (dialog) {
         $('#list1a', dialog.content).accordion(); 
      }});
   });

});
</script>
  6. vitto

    hi eric
    i got a little problem using sM in ie6.
    I’m using it together with cycle Plugin (yes i already asked something about this in the jquery discussion group:).
    problem is: i’m using this function to center images:


    $('#pic2 img').each(function(){
    $(this).css({top: '0px', left: '0px' });
    var t = ($(this).parent().height() - $(this).height()) / 2;
    var l = ($(this).parent().width() - $(this).width()) / 2;
    $(this).css({top: t, left: l });
    });

    and in ie6 the image appear much lower than they should. This is the page i’m working on:

    https://www.tasker.it/news_fiere/news_singola_gallery.php?id=29

    it’s like the container element in sM gets too much higher. any idea?

  8. Eric Martin

    @vitto – as I mentioned in the jQuery group, I’m not so sure that it has to do with a plugin, but with the CSS.

    @Helio – there isn’t a way to directly set it through the options. You’ll have to use external CSS or modify the script.

  9. Scott Campbell

    Hi, i have been up all night trying to do this, but i just cant. is it possible to use the contact (in the demos section) style and animation, but instead of a contact form, an iframe or something?

    Thanks Scott Campbell.

  11. Richard

    I upgraded to you newer modal, and as always im impressed.
    But what security feature did you add? i though it would be the tabbing issue but its not.

  13. Samuele Catuzzi

    simplemodal Error on IE6
    for example if you include your example “contact” into one table as this:

    Contact Form
    A contact form built on SimpleModal. Demonstrates the use of the onOpen, onShow and onClose callbacks, as well as the use of Ajax with SimpleModal.
    To use: Open data/contact.php and modify the $to and $subject values. To enable/disable information about the user, configure the $extra array.

  15. george

    onOpen doesn’t work in safari 3.0.4 for win. even in your text example, it doesn’t fadeIn the overlay.
    also clicking outside the modal, doesn’t close it.
    the 2nd issue i solved by:


    dialog.overlay.one("click", function (e) {
    modalClose(dialog);
    });

  16. Eric Martin

    @george – thanks for pointing out the Safari issue. It’s a known issue with Safari, and there are a few different ways to “fix” it. I’ll release a minor update that will resolve the issue.

    As for your second comment…it’s not a bug or issue…I didn’t want clicking outside the modal to close it. But as you posted, it is very simple to add that if you do 😉

  17. Kurt

    Below is the page I'm doing as a test. When I click the link, instead of getting a modal, I just see the text "Sample Content Just A String."

    What am I missing?

    Thanks.


    <html>
    </style>
    <head>
    <script type="text/javascript" src="contact/js/jquery.js"></script>
    <script type="text/javascript" src='contact/js/jquery.simplemodal.js'></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("a").click(function (e) {
    e.preventDefault();
    $.modal("Sample content just a string");
    });
    });
    </script>
    </head>
    <body>
    <a href="https://google.com/">Click Here</a>
    </body>
    </html>

  18. Joe

    Eric,

    Very nice work! This is going to make my site look very professional. I have a question for you. I would like to display a questionnaire form using your modal but before I display the form the user must be logged in. So if the user is not logged in I want to display a login form. After the user logs in I want to display the questionnaire form. I want all this done in a modal.

    I am using the jquery get request to check if the user is logged in which works fine. If the user is logged in I show the questionnaire form and if they are not I show a login form. Everything works fine up to this point. The problem happens when I attempt to login using the jquery ajax request in the complete option I want to display either the login form again or the questionnaire form if the login was successful but instead the modal says “sending” with the loading animation. Using FireBug I can see it make a get request to load the questionnaire form when it should be doing that yet. Please hlep. Thanks for your time.

  20. Joe

    I have gotten most of it to work. Now my problem is after the user logs in successfully I do another get to retrieve the questionnaire form but the send button doesn’t work. I think since the form changes the binding of the click event is reset. I try to bind the click event to the new form but it doesn’t seem to work. What could I be doing wrong?

  21. Eric Martin

    @Kurt – it looks like you haven’t included any of the CSS.

    @Joe – without seeing any code (do you have a link?), it’s pretty tough to know what the issue could be…

    @Clint – to get the url (why not just use the href?), try:

    $('#ppModal').attr('url')
  22. hotcicada

    hi,eric.
    why it is not possible to nested modal window?I think the nested modal window is very important and very useful

  23. Joe

    Eric,

    I figured it out. I probably would have never figured it out without Firebug. Thanks for taking the time to respond and for making this cool modal.

    Joe

  24. Eric Martin

    @hotcicada – nested modal windows is a feature that I’m working on…

    @Joe – glad you got it figured out! I don’t know how I ever did web development without Firebug! 😉

  25. Michael Cramer

    hello,
    i use this nice plugin for showing errors on my little app, now the problem os that there might be too many errors, which are not completly fit in the dialog.
    is there a way of adding some sort of scrollbar to the dialog?

  26. Karim

    I see in the code that there is a “Stand-alone close function to close the modal dialog”. However, I seem to have problems calling this function. It is easier for me to handle the event that could cause a close and close myself than to use the “modalClose” implementation. An example of how to call close() would be helpful for me.

    I simply create a dialog like this:
    $(strElId).modal(); //where strElId is string that contains the id of my element (this works fine, I see the dialog)

    Here are attempts for closing that don’t work:
    $(strElId).modal.close();
    $(strElId).modal().close();
    $(strElId).modal.impl.close();

  27. Eric Martin

    @Michael – you should be able to just add overlay: auto to the CSS for the content you are placing in the modal dialog.

    @Karim – in the current version, you just need to call $.modal.close();. See this post.

  28. Asle

    I using SimpleModal 1.1.1 and jQuery 1.2.3 to play YouTube-videos. It works perfect in Opera, Firefox, and Safari. But i have big problems i IE6 and IE7, and don't know what i am doing wrong.

    In IE6 nothing happens visually, but the sound is there, so i can hear the video playing in the background.

    In IE7, the overlay works good, but i get double playback of the sound, that means two copys of the video (the sound) are playing at the same time, but visually only one video is displaying.

    Her is an example of the code:

    <object width="475" height="400">
    <param name="movie" value="URLtoYouTUbe" />
    <param name="wmode" value="transparent" />
    <embed src="URLtoYouTUbe&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="475" height="400" />
    </object>

    Her is my CSS:

    #modalOverlay{height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:3000;
    background:#000;}
    #modalContainer{position:fixed;
    left:50%;
    top:15%;
    margin-left:-200px;
    z-index:3100;
    background-color:#fff;
    padding:4px 0 4px 0;
    border:4px solid #ccc;}
    #modalContainer a.modalCloseImg{background:url(x.png) no-repeat;
    width:25px;
    height:29px;
    z-index:3200;
    position:absolute;
    top:0;right:0;
    cursor:pointer;}

    Here is my custom JavaScript:

    jQuery(function() {
    jQuery('a.gluggjs').click(function() {
    jQuery.get(this.href, {}, function(data) {
    jQuery(data).modal({
    onClose : function() {
    jQuery('#modalOverlay').css('background-color', '#40566a');
    jQuery.modal.close();
    }
    });
    });
    return false;
    });
    });

    And i have both jQuery 1.2.3 and SimpleModal 1.1.1 in the head-element of my HTML.

    I would be very grateful for any help. You can also contact me at my email. I can pay you for any help on this issue. Thanks!

  29. artguy101

    Great modal!

    Could you publish a demo or code for simply loading an external html page into the modal (for those of us who want to use your script but don’t understand jquery.)

    I tried to follow the discussion here but got lost.

  30. Eric Martin

    @artguy101 – check out the contact demo. It contains a lot of extra “stuff” but it does exactly what you mention. It loads the HTML content for the contact form via an Ajax call.

  31. artguy101

    Thanks for the quick reply, Eric. I tried altering contact.js to just display an .html file (and a .php one) but I’m not making it work. Does anyone have a link to an example?

    Also, can simplemodal work from inside joomla? My situation is complicated because I’m using dynamic drive’s ajax script to load external pages into joomla content. Modals that use class=”modalboxname” work, but not ones that use rel=”modalboxname”

  33. Eric Martin

    @artguy101 – something like the following should work:

    <script type="text/javascript">
$(document).ready(function () {
	$('#ajax').click(function (e) {
		e.preventDefault();
		$.get('data.html', function (data) {
			$.modal(data);
		});
	});
});
</script>
</head>
<body>
<a href='#' id='ajax'>test</a>
</body>

    @yobin – can you be more specific? Are you talking about an issue on my site or with code you are working on?

  34. Michael

    Hi Eric, I am using the code from the confirm example, but I want to use it on only one form that I have on a page. It works for that form, but now whenever a I use a standard JS confirm dialog on other parts of the page, the SimpleModal window pops up as well as the JS dialog. Is there any way I can prevent this?

  35. Asle

    To clarify my comment (permalink to comment): The problem is only visible when i use &autoplay=1″ in the YouTube-URL. When i don’t let it autostart and the user must click on the video to play it, then it is OK in IE7. In IE6 the problem persist, but i don’t need to support IE6, only IE7.

  37. Druid

    Hi Eric:
    I used SimpleModal demo. It works perfect in IE6,But i have big problems in Firefox2.0, and don’t know what i am doing wrong.

    error infomation:

    uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: https://localhost:8080/havaatry/js/jquery.js :: anonymous :: line 23″ data: no]
    can you help me?

  39. Patrick K

    Hi Eric,
    thanks for this very helpfull and nice plugin!.

    Working on IE 6 & 7, quirks mode, I applied the patch as described in IE7 quirks mode hack. I ended needing to manipulate #modalOverlay.height since #modalOverlay and #modalContainer go away when scrolling vertically, so I set


    #modalOverlay {
    background-color:#000;
    cursor:wait;
    height: 300%;
    }

    but the plugin forces #modalOverlay.height to 100%. It would be nice if the plugin code honors all property´s value setted from css, or .modal() options.

  40. Eric Martin

    @Michael – try renaming the function to something other than confirm.

    @Asle – interesting. When I have some free time, I’ll try to see if I can figure out what is going on.

    @Gildas – thanks!

    @Druid – it’s hard to say what the issue could be without seeing any code.

    @Patrick – the next version should handle these types of issues better.

  41. Druid

    i download the Contact Form demo which is in the SimpleModal demo;i run it in localhost.ie6 no problem ,problems in Firefox2.0.I did not change any code what was download from your website.Thanks for your help.

    error infomation:

    uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0×80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: https://localhost:8080/havaatry/js/jquery.js :: anonymous :: line 23″ data: no]

  43. Asle

    Hello Eric. Now i am using SWFObject to play the YouTube videos inside SimpleModal overlay, and that completely solved my problems. Now it works perfect in IE6, IE7, Safari, Opera and Firefox – so i don’t need a solution to this anymore. Thanks! (PS! SimpleModal is great, thanks!)

  44. Michael

    Thanks Eric, that worked a treat.. i guess i was looking a little too hard to not see that myself! =]

  45. Dave

    Hello!

    First of all, congratulations for the script.

    Second, I’m using the Contact Form. My form has to send a file, something like:

    but ther’s noway to send the file. Somebody can help me?

    Thank you in advance!

  46. Dave

    Dave Again,

    the form does not appear in my last post. It’s just a form with a file input

    Thanks

  47. JP

    I had this error also in the download of contact form

    error information:

    uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0×80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame ::……

  48. manfred

    Hello JP and Druid,

    had the same problem:
    uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0×80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)”

    my solution was: not just simply click on the “index.html” which you have downloaded in the directory contact! You have to run it on a real webserver because php can only work on a webserver (i.e. install xampp on a testmachine).

    Hope this solves your problem too.

  49. Eric Martin

    To all having the NS_ERROR_XPC_BAD_CONVERT_JS issue – The contact form demo uses Ajax and PHP – which means it needs to be served through a web server in order to work (as mentioned by manfred).

    @Asle – thanks! I’ll check out that library and see if there is anything that I can add into SimpleModal.

    @Dave – you’d have to not only add the input on the form, you’d also have to code contact.php to handle the file and attach it. See File Attachments on https://www.sitepoint.com/print/advanced-email-php

Comments are closed.

Scroll to Top