SimpleModal 1.3.3 Released

In the SimpleModal 1.3.2 release I re-introduced an issue in IE7 with determining the container dimensions.

Thanks to all who reported the issue, it has been fixed and 1.3.3 has been released.

If you're curious about the specifics, in IE7, $(element).width() (and height()) return a value that includes the padding and/or margin of the element. All other browsers return the actual height/width. This was throwing off the logic for determining how to size the container.

Changes in 1.3.3:

  • Fixed IE7 issues with container dimension determination

If you have any questions, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.

Thanks for using SimpleModal!

Links: Project Page | jQuery Plugins Page



  1. November 7, 2009 @ 10:37 pm #

    G'day Eric, great plugin, have voted and added your script to a plugin I have been playing with for awhile called 'editEase'.

    It a perfect compliment to what I was doing with edit in place websites.


  2. November 27, 2009 @ 10:02 am #

    Very slick

  3. December 4, 2009 @ 2:57 pm #

    Is it possible to conciliate this amazing plugin with database access.
    I would like to use the SimpleModal to save comments into a database.
    I've been looking into the code, but it seems oriented to Send-to-mail stuff.


  4. December 4, 2009 @ 3:32 pm #

    @Keith - I've actually been considering this for the next release. It would function much the same as the blog comments. Now, I just need to find the time to work on it ;)

  5. December 4, 2009 @ 5:01 pm #

    I've been around the code and taking it apart.
    I'm trying to inject some queries on the contact.php code, but so far I couldn't get it to work.

    Thanks for considering the db access.

  6. December 5, 2009 @ 4:46 pm #

    Hello again.

    I've been messing with SimpleModal, in order to use it like a LightBox to display a single image. But there seems to be a bug with it.
    I removed all the paddings and margins (also defined width/height as auto), so the image would fit perfectly, but there's always a space of 5px height on the bottom. All of the other margins are good.
    I tried different sizes, but that 5px are always there.
    I got a workaround for it (but it's stupid): give the container the same background color as the borders; increase the top, left and right borders to 5px and remove the bottom one.

    It's kind of stupid, but it works.

  7. December 8, 2009 @ 6:17 am #

    Hi Eric,
    Thanks for this plugin. Any way to use it for WordPress login?

  8. December 17, 2009 @ 7:53 pm #

    @Ronny - just for you, I created SimpleModal Login. Try it out and let me know if you have any feedback.

  9. January 11, 2010 @ 5:38 am #

    Hi Eric,

    Firstly, thanks for the plugin. I am using the OSX style one.

    I have got a requirement to satisfy users with different screen resolutions. I want the modal container to slide down to fully cover the browser's viewport depending on the current resolution.

    Therefore if the resolution is:

    - 1024x768px: The modal slides down fully within the browser's viewport, so it touches the browser's status bar. The text of the modal container is bigger than the browsers' viewport. Thus, a scrollbar is needed.
    - Higher than the above: The modal slides down fully within the browser's viewport, so it touches the browser's status bar. A scrollbar is not needed as the text is fully displayed.

    So, I changed the OSX plugin slightly but couldn't get the desired outcome.

    #osx-modal-data {overflow: auto}; for the scrollbar to appear only within the content data. Also, I changed the js file slightly trying different things in the height variable of the slidedown function but no success.

    Have you got any ideas?


  10. January 11, 2010 @ 8:04 am #

    Hi Eric,

    Just to let you know that I have got a simple solution and it works like a charm!

    d.container.slideDown('slow', function() {
    setTimeout(function() {
    var dataHeight = $("#osx-modal-data").height() + title.height() + 20;
    var viewportHeight = $(window).height();
    var contentHeight = viewportHeight;
    if (dataHeight < viewportHeight) {
    contentHeight = dataHeight;
    else {
    contentHeight = viewportHeight;
    { height: contentHeight },
    function() {
    $("div.close", self.container).show();
    $("#osx-modal-data", self.container).show();
    }, 50);

    Giuliano M.

  11. February 6, 2010 @ 3:51 am #

    Hi there Eric - loved your work!

    I had a question regarding the contact form demo? I wanted to pass a variable to the php script being called.

    Here's the scenario: there are many email addresses that the user can choose to email. He clicks on one. now, I want that email to be passed on to the php script. Can you recommend a 'clean' (and easy way) I can modify the existing files to mkae this work? I'm a noobie to jquery btw!

Leave a Comment

Sorry, comments are closed. You can contact me directly, if you like.

Eric Martin