SimpleModal

v1.2.3

Deprecated: please see the current version.

Archives: SimpleModal v1.1.1 | SimpleModal v1.0.1

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.

Demos

Tests / Examples

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.2, you have the option to use external CSS or to pass in CSS attributes for the modal overlay, container, and data elements as options. The options are: overlayCss, containerCss and dataCss and take a key/value object of properties. See the jQuery CSS Docs for details.
  • SimpleModal internally handles the setting of the critical CSS properties, to prevent having to manually define them. Now in 1.2, SimpleModal dynamically centers the modal dialog and also adds a position option, for manual positioning.
  • SimpleModal internally defines the following CSS classes:
    • simplemodal-overlay: (previously modalOverlay) used to style the overlay div – helpful for applying common styles to different modal dialogs
    • simplemodal-container: (previously modalContainer) used to style the container div – helpful for applying common styles to different modal dialogs
    • simplemodal-data: (previously modalData) used to style the data element – helpful for applying common styles to different modal dialogs
    • modalCloseImg: used to style the built-in close icon (part of the closeHTML option, so this class is not changable)
Example: Applying CSS directly via the options

* Note: because modalCloseImg is not an actual element, you’d still need to use external CSS to style it

data.modal({
  overlayCss: {
    backgroundColor: '#000',
    cursor: 'wait'
  },
  containerCss: {
    height: 400,
    width: 600,
    backgroundColor: '#fff',
    border: '3px solid #ccc'
  }
});
Example: Applying CSS via an external stylesheet
#simplemodal-overlay {
  background-color:#000;
  cursor:wait;
}

#simplemodal-container {
  height:400px; 
  width:600px; 
  background-color:#fff; 
  border:3px solid #ccc;
}

#simplemodal-container 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:
<!--[if lt IE 7]>
<style type='text/css'>
  #simplemodal-container a.modalCloseImg{
    background:none; 
	right:-14px; 
	width:22px; 
	height:26px; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/x.png', sizingMethod='scale'
      );
  }
</style>
<![endif]-->

Options

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

  • iframe: [DEPRECATED in 1.2.2]
    Update your object and embed elements with the wmode property.
  • overlay: [DEPRECATED in 1.2]
    See opactiy, below
  • opacity: (50) [renamed from overlay in 1.2]
    The opacity value, from 0 – 100. 0 = transparent 100 = opaque
  • overlayId: (‘simplemodal-overlay’)
    The DOM element id for the overlay div
  • overlayCss: ({})
    The CSS styling for the overlay div
  • containerId: (‘simplemodal-container’)
    The DOM element id for the container div
  • containerCss: ({})
    The CSS styling for the container div
  • dataCss: ({})
    The CSS styling for the data div
  • zIndex: (1000) [new in 1.2]
    Starting z-index value
  • close: (true)
    Show the code in the closeHTML option (below)?
  • closeTitle: [DEPRECATED in 1.2]
    See closeHTML, below
  • closeHTML: (‘<a class=”modalCloseImg” title=”Close”></a>’)
    [new in 1.2] – The HTML for the default close link. SimpleModal will automatically add the closeClass to this element.
  • closeClass: (‘simplemodal-close’)
    The CSS class used to bind to the close event
  • position: (null) [new in 1.2]
    Position of container [top, left]. Can be number of pixels or percentage. If not set, SimpleModal will center the container. To only set one value, leave the other blank. For example: [top,] or [,left].
  • 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 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');
    });
  });
}});
  • 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 elements. If you are including another plugin (TinyMCE, DatePicker, etc.) in a modal dialog, this is where you want to initialze that plugin.
  • 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 elements. After you’ve applied effects, etc., you’ll need to call $.modal.close(); so SimpleModal can re-insert the data correctly and clean up the dialog elements.
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!
      });
    });
  });
}});

Other Notes

Default Values
  • If you have a value that you want to be used for all modal dialogs, instead of passing the option in for each one, you can globally modify the defaults.
Example – Single Property
$.modal.defaults.closeClass = "modalClose";
Example – Multiple Properties
$.extend($.modal.defaults, {
	closeClass: "modalClose",
	closeHTML: "<a href='#'>Close</a>"
});
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 the persist option is true, SimpleModal will “re-insert” the original element, with changes intact. If you use an onClose callback, you’ll need to call $.modal.close(); (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, you’ll need to call $.modal.close(); (see the onClose in the Callback section above)
Known Issues
  • In IE6, the state of checkboxes and radio buttons are not maintained using the persist option.
  • In IE7, the state of radio buttons is not maintained using the persist option.
  • To prevent Flash objects from “bleeding through” the dialog, make sure to set the wmode property for your object and embed elements to either opaque or transparent (reference).
Browser Compatibility

SimpleModal has been tested in the following browsers:

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

Changes in 1.2

* From ChangeLog.txt

  • Added new internal variables (ie6, ieQuirks and w)
  • Added better IE6 detection (preventing false positives with IE7)
  • Fixed $.modal.close() function to correctly utilize an onClose callback without causing a infinite recursion crash
  • Added new options (dataCss, zIndex, closeHTML and position)
  • Renamed overlay option to opacity
  • Removed closeTitle option
  • Renamed default class and id names from modalXxx to simplemodal-xxx
  • Added better z-index handling – initial value can be defined through the options
  • Fixed element creation to be XHTML compliant
  • Added window dimension detection
  • Fixed Safari issue (directly setting display:’none’ as opposed to using .hide())
  • Changed width/height setting for overlay and iframe
  • Fixed IE7 positioning issue in quirks mode
  • Added IE6 expression for elements – eliminating the need for an external stylesheet
  • Added dynamic centering of container as well as a position option for manual positioning
  • Added namespacing on events
  • Added window resize listener to resize dialog elements
  • Updated demo and test/example pages

Upgrading

Things to be aware of when upgrading to 1.2 from a previous version:

  • If you used the overlay option, you’ll need to rename it to opacity
  • If you used the closeTitle option, you’ll need to now use the closeHTML option instead
  • Remove the container positioning CSS from your stylesheet (remove the top, left, and margin-left properties)
  • Remove any IE specific container positioning CSS
  • Overlay, container and data class and id names changed! Update your code/CSS or use the overlayId and containerId options to have SimpleModal to use the old id names.
  • closeClass option value changed! Update your code or use the closeClass option to have SimpleModal to use the old class name (modalClose).

The following option overrides should help with backwards compatibility, although you’ll still have to update your CSS. Place this somewhere after you include SimpleModal but before you create a modal dialog:

$.extend($.modal.defaults, {
  closeClass: "modalClose",
  overlayId: "modalOverlay",
  containerId: "modalContainer"
});

220 thoughts on “SimpleModal”

  1. Eric Martin

    @Ben – the flash issue is something that can only be reliably solved with a change in the way the flash is embedded into the site. A solution is listed under “Know Issues” in the Other Notes section above.

    As for your second request – I created a version that does that, but never released it. It was a complete rewrite and I just have never gotten back to it. So, we’ll see, maybe in the future 😉

  2. Ben

    doh! I should have tried that – it just did not come to my mind! …and I should have checked the known issues, yes. thanx.

    I also came across the problem others did when I removed the dimensions of the container in order my items to use only the necessary space when loaded. They load ok, with the correct size. unfortunately though, they are not positioned correctly.


    $('a#test3').click(function (e) {
    e.preventDefault();
    $('New DOM Element').modal();
    });
    </pre

    In the above example (from your examples), the modal that comes up is not positioned correctly: the top left of the modal is positioned in the center.

    I checked and jQuery returns 0 when trying to view any of the height/width that you have used below (and that explains the positioning):


    var top, left,
    hCenter = (w[0]/2) - ((this.dialog.container.height() || this.dialog.data.height())/2),
    vCenter = (w[1]/2) - ((this.dialog.container.width() || this.dialog.data.width())/2);

    if the window is resized the modal gets positioned correctly (as others have said).

  3. Brandon

    Great plugin! Thank you for it.

    Question 1 — how do I make the Modal pop up automatically when the page loads? My visitors need to be able to sort themselves according to geography, which I am using an imagemapped jpeg of the US for… but that jpeg is what I want within the modal… which leads me to:

    Question 2: How do I write a link within the modal that both closes the modal AND redirects the parent page to a new URL?

    I’m pretty ignorant about coding, but am learning day-by-day on how to hack it together. Thanks again for this outstanding code! 🙂

  4. Raj

    Hi Eric, great plug-in for a modal box. I am a JS novice and have a question.

    I am trying to implement a Form that a visitor has to fill to download a PDF. I like the Contact Form demo in your example.

    How can I make it so that the visitor can Submit and it will automatically trigger a download upon successful submission?

  6. Timothy Jordan

    It’s always difficult when you do a release for client testing only to realize that IE6 won’t display the modal dialog box properly. That just happened to me, but then I checked this website, realized I was 0.0.1 version out of date, upgraded, and it worked. Crisis averted.

    Thank you for the great work.

  7. Aby

    Solved the above stated problem.

    This solution is for anyone who want to do the ajax way:

    You can read the details from here : https://docs.jquery.com/Tutorials:AJAX_and_Events


    $(document).ready(function(){
    $('body').click(function(event) {
    if ($(event.target).is('img#customize_indQ,a.customize_indQ')) {
    // $('img#customize_indQ,a.customize_indQ').click(function (e) {
    event.preventDefault();
    var modal_Q = $('#modal_indQ').modal({onOpen: modalOpen,onClose: modalClose,persist: true});
    /* $().bind('click.simplemodal', function (e) {
    e.preventDefault();
    modal_Q.close();
    }); */
    // });
    }
    if ($(event.target).is('.simplemodal-close')) {
    event.preventDefault();
    $.modal.close();
    }

    });

    });

    If this can be further optimized. please do tell me.

    This module was a great help. I would like to contribute to this

  8. Eric Martin

    @Ben – thanks. I’ll make sure to get the positioning issue fixed in the next release.

    @Brandon – 1) you can just call the modal when the DOM is ready:

    $(document).ready(function () {
  $(element).modal({options});
});

    2) Assuming you have a link in your modal content with a class of close, something like this should work (untested):

    $(document).ready(function () {
  $(element).modal({onShow: function (dialog) {
    dialog.data.find("a.close").click(function (e) {
      e.preventDefault();
      $.modal.close(); // closes the dialog
      window.location = "https://www.yoururl.com"; // redirect
    });
  }});
});

    @Raj – There are a number of ways you could do this. My suggestion would be to have the form submit and return the URL for the download. Then use that url for the window.location or to display a link to the user.

    @Aby – if you use the simplemodal-close class, the close will automatically be bound to those elements. However, if you are adding your own close binding, it has to be done in the onOpen or onShow callback.

    @Timothy Jordan – sorry for the near crisis…glad you got it resolved 😀 I really wish IE6 would go away!

  10. Tyrone

    I am having an issue in Opera that occurs when you click close.

    I was pulling my hair out trying to work out why your demos worked in Opera and why mine didn’t. Then I noticed that if the modal div sits lower than the content it is covering and the close button is clicked part of the modal div and the overlay is still visible. This didn’t happen with your demo page (https://www.ericmmartin.com/simplemodal-test/) as the content always site lower vertically than the modal div.

    There may be a quick work around and this issue may have been raised before but you may want to take a look.

    Tyrone

  11. Lenni

    Hey Eric,

    Is it possible to have variable sized divs, ie. ones with only a max-width and max-height defined (as opposed to height and width) and still have them centred in the middle of the page? I’m using the plugin for a number of modal popups with different sizes on the same page.

    Whenever I replace the width and height CSS properties with max-height/max-width the centring doesn’t work anymore.

    Lenni

  12. alvaro

    Thanks erik, i´m trying to do some localization in spanish for a small project, when I type a wrong email like: xxx it shows Email is invalid, where to change this? And when I decide to clear the form, it shows Goodbye. It´s not in the php file isn´t it? demo.
    Great script.

  14. Jeremy Chone

    Great one. One issue though.

    How can have the container of position “absolute” rather than “fixed”? I try to override it with the external css and with the containerCss (as $(‘#formAddMatter’).modal({position: [‘230px’,’500px’],containerCss: {position:’absolute’}});), but both did not work 🙁

  15. Ben

    Hello again,

    I was trying to load a flash movie into a modal, and noticed that whenever the “AC_FL_RunContent” function (https://www.adobe.com/devnet/activecontent/articles/devletter.html) was used, the content of the page gets lost; only the flash appears and the rest of the page keeps loading forever.
    When using the exact same page without that function for flash elements, the modal and the flash appear ok.

    Thanx.

  16. bvde

    Hello,
    I try to open a modal window from a google map. It was ok in safari firefox IE7 but not in IE8.

    ... google code ...
    GEvent.addListener(marker,"click",function(){
    $('').modal();
    });

    Any idea ?
    Thank you.

  17. bvde

    Sorry

    GEvent.addListener(marker,"click",function(){
    $('<iframe style="width:800px;height:550px" src="../template/map.php?from='+address+'"></iframe>').modal();
    });

  19. lance

    I really want to use your plugin, but Im struggling to get the overlay to fill the page in ie 6 when the content is less than the width and height of the page. The right side of the pages has about a half an inch of white when the dialog pops up. The bottom allows a little bit of a scroll, but then the overlay stops and the rest is white. It works fine in Firefox (I haven’t tested IE 7 yet). Is there any way you could add this bug to your list of fixes? I appreciate your hard work. If you email me or tell me where I can upload some sample code, I can upload an html document that demonstrates my issue. I had hoped it was fixed with the 1.2.3 version I saw you released, but the issue is the same. Thanks in advance!

  20. Mike

    Your plugin is excellent and I am currently using it my website.

    I have just come across one major problem. I cannot get an to postback when I click on ‘Yes’ from a modal confirmation dialog. I am using jQuery v1.3.2 and Simplemodal v1.2.3.

    Go to https://javiercrespoalvez.com/2008/12/aspnet-confirmation-button-using-jquery.html for an excellent sample of a custom confirmation button using simplemodal, which WORKS when using an older version of jQuery and simplemodal. It seems to me that either your new version of simplemodal is flawed or jQuery is the one with the problem.

    I am reluctant to use older libraries just for the sake of getting modal confirmations to work properly using asp button server controls.

    Hope you can help? Thanks in advance!

  21. Mike

    Update to my last post!

    I have done some further tests and it seems that Simplemodal v1.2.3 does not work with jQuery v1.3.2. I have not tested it with jQuery v1.3 and v1.3.1.

  22. AronZvi

    Hey Eric,

    I’ve come across an issue where I’d like to replace the html inside the modal container following an event inside the original container html. When I attempt a simple replace of the html inside the container using the jquery html() method, The html is replaced. However, it is “covered” by the overlay. How can I perform a simple html replace with the new html still appearing in the “foreground”?

    Thanks in advance…

  23. Eric Martin

    @Wout – thanks! In the next version, I will provide an option for where to append the elements. ASP.NET users can use form as the option instead of body.

    @Tyrone – thanks for letting me know. I actually tried to get around some of Opera’s screen “painting” issues – but there were still some that I wasn’t sure how to fix. I’ll add it to the issues list and look into it further.

    @Lenni – can you send me some specific examples of what you are trying to do. I need to play around some with dimensions and positioning.

    @alvaro – All of that text should be in contact.js. Ah – you got it 😉

    @Jeremy Chone – the fixed positioning is hard-coded in SimpleModal – mainly because I didn’t see why you would want to be able to scroll the modal. But with screen size issues, I could see the need (perhaps you have a different reason). To make it absolute, you’ll have to modify the source.

    @Ben – Do you have a sample page I can see this issue on?

    @bvde – What is the error/problem? Do you have a sample page I can see this issue on?

    @lance – have you tried adding CSS body {width:100%; height:100%;} to your page? Either way, I thought I had tested that scenario – I’ll look again.

    @Mike – It sounds like maybe there is something in your code causing an issue. I’ve tested SimpleModal 1.2.3 with jQuery 1.3.2 and haven’t had any issues. You may be having an issue where SimpleModal elements need to be appended to the form and not the body?

    @AronZvi – Without seeing an example, I can only guess…but did you make sure that you are accessing the element inside the modal? If you are not using one of the callbacks, you should make sure you are doing something like:

    $("#simplemodal-container YOUR_ELEMENT_SELECTOR").html("CONTENT");
  24. lance

    Thanks for the response. I tried body {width:100%; height:100%;} and it stretched it out to fill the screen, but put horizontal and vertical scroll bars in. When I scroll right or left, or up or down, it doesn’t scroll far before it ends and has the little bit of white showing on the far right and on the bottom piece. Maybe something else is going on. Essentially all I did was download the project from https://beckelman.net/post/2008/12/07/Modal-Delete-Confirmation-V3-Using-SimpleModal-jQuery-Plugin-Demo.aspx to get a better feel for jquery/simplemodal and run it (it is just a pure html doc). Works fine in firefox, but the overlay has issues in ie6. Let me know what you think the issue is and thanks for the great support and plugin!

  25. Jason

    I am using the slightly older version of simplemodal (will upgrade soon but it’s in so many places its going to take weeks to change over!) however, it doesn’t work in IE8, will the upgrade solve this issue?

    Thanks,

  26. Ben

    Hello Eric,

    in the link below you will find an example demonstrating the issue with the “AC_FL_RunContent” function. Update: the issue does NOT appear in IE (at least 8 that i tried) – it does in Firefox and Chrome.

    link.

    Please let me know what you have found.

  27. Miguel

    Hello Eric,

    my english not is good, my question is: howto open are modal another modal.

    Thank You Eric.

  28. Waleed GadElKareem

    Thank you for your work
    I have some questions or suggestions
    1- why doesn’t the script count width and height automatically?
    2- why the modal does not close current displayed modal instead of discarding it?
    3- why do you create an iframe to hide select in IE instead of hiding the select menu?

  29. Ben

    Hello Eric,

    is there any progress on that positioning issue (new dom without specifying width/height in the container)?
    when should we expect the new version to be available?

    Thank you very much!

  30. kosh

    Hi,

    I have a problem with Opera 9.25 build 8827. I use doctype HTML 4.01 Transitional. After calling $(el).modal() I see only overlay, the modal is not visible and browser notably slow down when scrolling. I tried to define z-index property for #simplemodal-overlay and #simplemodal-container but that didn’t help. Will appreciate for any idea.

  31. David

    Hi there. I am new to jQuery so forgive if it is a stupid question : )

    I am using the contact demo and I want to have a small image/link in a repeating order list that passes the Order ID to the contact.js function ( that calls the form )

    How do I pass values to the contact.js function using the demo? Or, how do I pass name value pairs?

    TIA,
    Dave

  32. Allex Teixeira

    Hi Eric, thanx for this great plug-in for a modal box.
    I’m a JS novice and have the same problem like David above… I have one tab and when I cliked in one line I want pass one value to the form load in the model box, but it don’t work… how can i do ?
    $(document).ready(function () {
    $('#tab tr').click(function (e) {
    e.preventDefault();
    var pos = {id: $('#tab tr:first').text()};
    $.get("top.php", pos, function(data){
    $(data).modal({ etc....

  33. georgeA

    Thank You for this plug in, it’s working perfectly for me 🙂
    I have one question though,can You provide some example,that i can use to implement simple login form instead of default one.

    Thanks in advance

  34. El Boletaire

    Hi Eric!

    First of all.. sorry about my english :S (or “spanglish” xD).

    I was very happy using your plugin with no problem until I wanted to use the options “onOpen” and “onClose” I can only click one time on a link. Once you click on it you can not re-open any other link (with Firebug I see that the content loads, but does not show me the modalbox).

    Maybe because I am using javascript functions instead of jQuery events?

    Could it be because I’m using Javascript functions

    Here you can see:

    https://breaknest.skoreasound.com/v2/netlabel.php

    (the code is in that page)

    Thanks for your help! And for the plugin, of course 😀

  35. T Vainisi

    Hi Eric,

    I see that a number of people have figured out how to put scroll bars into the modal window to fit long content, but I can’t find what the actual solution is. When you have a minute can you throw me a bone?

    T Vainisi

  36. Eric Martin

    @lance – that is strange. I tried removing the padding from body{} but that still left a gap at the bottom. I’m not really sure what to say other than it must be something with the site code, because all of the tests and demos work fine with IE6.

    @Jason – I believe that the latest update resolved any IE8 issues – let me know if you are still having issues.

    @Ben – I think it is an issue with how the AC_FL_RunContent function works. I’m going to try and get some work done on SimpleModal this week, so hopefully soon.

    @Miguel – Are you asking if it is possible to open multiple modals? If so, the answer is no 😉

    @Waleed GadElKareem –
    1) Height/width of the content? Mainly because I wanted it to be up to the developer to determine and not the content. What if the content is 1000x1000px? Then SimpleModal would need a max height/width, etc. Something to consider adding, I guess.
    2) Not sure what you mean?
    3) Good question. Just easier, I guess.

    @kosh – sounds like a positioning issue. Do you have a sample or link?

    @David – you can make the orderid part of the element ID and use that to pass to the contact.js script.

    @Allex Teixeira – I’d need to see more of what you are trying to do. You can email me, if you like.

    @georgeA – I don’t have an example, but it should be fairly straight forward.

    @El Boletaire – Hmm…can you put up a version of SimpleModal that is not packed, so I can debug through it.

    @T Vainisi – add overflow:auto to the element you are putting in the modal dialog.

  37. Ladan

    Hi Eric, I am working on a Web site and I am having an issue with Simple Modal on IE. I am using two jQuery modal plugins on a page. One to show a photo gallery and one to show a video. The gallery plugin is lightbox (https://leandrovieira.com/projects/jquery/lightbox/) and the video modal is Simple Modal.
    The issue is that on IE if the user clicks on the gallery images first and after that the video link is clicked, to open the video in simple modal, there is a Javascript error and the simple modal never opens. There is no issue on FireFox, or if the video link is clicked first. Could you help with this problem?
    Here is the website. In IE click on the gallery image first. After closing the modal click on one of the video links.
    https://www.carplanet.com/detail-1959bugeyewht-org.html
    Thanks!

  39. wasan

    Hi Eric, thanks for great plugin.
    I need help with displaying simpeModal
    on top of iFrame with PDF. The problem is that part of
    SimpleDialog intersecting with iFrame(with PDF) is going behind
    iFrame. How can i fix this?

    thanks in advance
    wasan

  40. Kevin

    Hi Eric,

    First of all great job! I’m using this code in several of my projects. However recently I upgraded from jquery version 1.2.6 to 1.3.2 and unfortunately this broke the postbacks for ASP.NET projects as stated earlier by Mike (and some others).

    I tried the suggested solution of changing your js code from ‘appendTo(“body”)’ to ‘appendTo(“form”)’ but that seems not to be the problem.

    I’ve created a test project and used your (unmodified) code and ran the project with both versions of jquery. Using jquery v1.2.6 is causing no problems at all, but when I switch to v1.3.2 the postback won’t occur anymore. The only change between these runs are the versions of jquery used. I’ve also tested all other versions of your simplemodal code (i.e. v 1.1.1 & 1.2.1) and they all seem to behave the same. They will all post back in v1.2.6 and not in v1.3.2.

    Thnx Kevin.

    NB I’m happy to sent you I small test project so you can review it, just email me and I’ll sent you a zipped ASP.NET app…

  42. Ladan

    Hi Eric, I sent you a message earlier in the week regarding a conflict between lightbox plugin and the simpleModal plugin on IE, if the lightbox is used first. I need to send you a new url for you to check the issue on. Check the url below on IE7. First click on the photos and after closing that modal click on the video links. SimpleModal gives a javascript error and modal doesn’t open to display the video.

    https://www.carplanet.com/detail-1969duetto-org.html

    Thanks very much for a great plugin and you help. -Ladan

  43. nathaniel

    OK, so I’ve got a div I’m using for my modal dialog, and I do the following on postback:


    Dim csm As ClientScriptManager = Page.ClientScript
    Dim script As New StringBuilder
    script.Append("$('#pnlLoadFinished').modal();")
    csm.RegisterStartupScript(Page.GetType(), "modal", script.ToString, True)

    It works fine in FF, but in IE I get:

    Internet explorer cannot open the Internet site: blah blah

    Operation Aborted

    —– It then gives me an “Internet Explorer cannot display the webpage” error. Thoughts? FYI, using JQ 1.3.2 and SM 1.2.3. Perhaps it’s a callback issue?

  44. nathaniel

    Ah…when injecting the javascript from a postback, make sure you wrap it in document.ready()!! I KNEW that, but thought I was using a shorthand form of it.

    Whatever, I got it working. Hooray! Now to try and get postbacks back.

  45. Ortubes

    Question 1 — how do I make the Modal pop up automatically when the page loads?
    $(document).ready(function () {
    $(element).modal({options});
    });

    Which must be added the code to be executed when you open the page?

  46. Snowcore

    I have a problem with file upload in IE. Sometimes when I submit my form in the madal dialog with only one element(file), the input clears and form doesn’t submits.

  47. Pragnesh

    hi Eric,
    I want to attach the modalbox from the databound event of the gridview.
    But it does’nt seem to be working.
    Any suggestion?

    Thanks
    Pragnesh

  48. WeBoat

    I just stumbled on this project and really like what I’m seeing!

    Quick question: Is there anyway to load the content into the modal when it opens? I’m looking at using it for a terms and conditions and don’t want to have the overhead every time a page loads. Ideally it would just grab it off our server when they open the modal window.

    Thanks, looks great.

  49. Eric Martin

    @Ladan – While viewing in Firebug, I see that the lightbox plugin is adding a visibility attribute to each object in the page. For each of your modal calls, try adding the removeAttr function to see if it fixes the issue:

    $('#dialog1').removeAttr("visibility").modal();

    @wasan – do you have some sample code or site I can see?

    @Kevin – If you can send me your test project, I’ll take a look. I’ve been finding a lot of issues with 1.3.2, unfortunately.

    @brad – I’m getting ready to release 1.3 beta and still have not added nested modals. I’ve been leaning towards not adding this feature, but will reconsider.

    @nathaniel – It could be a jQuery 1.3.2 issue – have you tried any earlier version of jQuery? Oh – I see that you got it resolved…nevermind 😉

    @Ortubes – yes, that is how you would do it.

    @Snowcore – what event are you binding to the form? I’ve seen issues with one form element and using the click function vs the submit function.

    @Pragnesh – Do you have a code sample or link? What version of jQuery are you using?

    @WeBoat – the easiest thing to do is do an Ajax call then load the response in a modal dialog. Example:

    $(link).click(function (e) {
  e.preventDefault();
  $.get(url, function(data) {
    $(data).modal({options});
  });
});
  50. Ben

    Eric,

    i just tested a sample page in an IE6 (#&$%^@) and noticed that if the page is shorter than the viewport (e.g. height is 600px while viewport is 1024px) then the overlay covers only as far as the page extends, and not the whole viewport!

    thanx (again and again 🙂 )

Comments are closed.

Scroll to Top