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. Derek

    Is it possible to have it email a different person depending on who they select? ie: i have a drop down that the user can select who to email to, and then it will email the form to who they selected.

  2. Keith

    Hi, great little plugin. However there are issues with running SimpleModal 1.2.2 on IE8 beta (RC1) and jquery 1.3 or jquery 1.3.1

    I get the following message in the IE8 debug window:

    Not implemented:
    if(i<2){s.removeExpression('height')

    The code that is highlighted specifically is:

    s.removeExpression('height')

    I know IE8 is still beta so you may not want to comment on this, however it all works fine in IE8 beta using jquery 1.2.6. Should this be raised with the fine folks at jquery?

    Thanks, Keith

  3. Keith

    Just an additional piece of information regarding the IE8 beta issue: this only occurs when IE8 beta is NOT in compatibility view – that’s to say it’s in its native IE8 mode.

    Ta, Keith

  4. Eric Martin

    @Doug Bonneville – Are you using the “unreleased” version of SimpleModal or some other plugin? The released version does not have does not have the esc to close binding. You can turn off the close link with:

    $.modal(elem, {close:false});

    @Sunny – It is a feature that I have not added to SimpleModal yet. It is a major oversight for a modal dialog and I’m sorry I haven’t put it in yet. I have the necessary code, just need to get it in.

    @Caspar – I usually include the following CSS on every page I create (my own “reset”):

    * {margin:0; outline:0; padding:0;}
body {height:100%; width:100%;}
img {border:0;}

    @Sean – $.modal.close();

    @Derek – it is possible with some modifications to the code. Are you using the WordPress plugin or the demo version? See this response for some ideas.

    @Keith – thanks for letting me know. I haven’t recently tested with IE8 and am not sure if this issue is due to the browser or jQuery. I’ll added it to the issues list in order to monitor it as IE8 gets closer to release.

  5. Pingback: My best 7 free JS model boxes « Tech Gossips

  6. Mark Melville

    OK this drove me crazy, I used the sample code above to set the size programatically. (Taking the width/height out of CSS and putting in the options):

    $.modal("", {
    containerCss: {
    height: '480',
    width: '720'
    }
    });

    FF would not center the modal until the browser was resized. Then I changed the width and height to be numbers, not strings, and it worked great. Why do you have the sample code with strings if that does not work???

    Mark

    This works great, but I need the size of this iframe modal to be set at runtime, so I took the width/height of the CSS and put it in the options of the $.modal() call. in FF the window the right size but not centered unless the browser is resized. it works fine in IE. Any ideas how to get it working in FF? Thanks.

    Mark

  7. Eric Martin

    @Mark Melville – “Why do you have the sample code with strings if that does not work???”
    Just to irritate you 😛 Actually, it was a typo, thanks for letting me know.

    “Any ideas how to get it working in FF?”
    Can you send me some sample code or a link to the problem page?

  8. Eric Jasinski

    I have read the posts and have found similar issues, but not one like this exactly, and I’m kind of stuck. I am getting an issue in IE7 that seems fixable. My modal pops up fine, everything looks good. I have a button that causes the page to expand, the page adds an upload (file) field for every option selected. If you select 10 items in the select box – 10 file inputs will be added inside the modal causing the page to grow by about 10 times . The issue is that it doesn’t seem to redraw the scroll bars for the modal with a bigger height. Once you add enough file fields, the scroll bars no longer let you scroll all the way to bottom. What I need is a chunk of code that would redraw/recalculate the scroll bars in the modalContainer – I’d add it to the onselect/onclick or something so whent they select an option, the scrollbars will redraw. Any ideas?

  9. Juan

    Hi, very nice plugin!

    I would like to know how to make users to close the modal window by clicking the shadowed zone.

    Juan

  10. Mark Melville

    Taking the quotes off was all that was needed to fix it for me. The last paragraph in my post was written before I figured it out and I didn’t realize it was still in there. Sorry. Hey, it was irritating, but it was worth the time to figure it our because SimpleModal is quite amazing.

  11. fsifabio

    Hi Eric,
    The “divModal” doesn’t appear over the content. It’s displayed at content’s bottom.
    I removed my custom css to ensure that’s not specific case.

    Thanks, Fabio

  12. Pingback: Httpcode - ASP.NET Control Toolkit – JQuery Equivalents

  13. Eric Martin

    @Eric Jasinski – if you put the CSS overflow:auto on your content div, would that fix the issue?

    @Juan – you can use the onShow callback to do it. Something like this should work:

    $(element).modal({onShow: function (dialog) {
    dialog.overlay.click($.modal.close);
}});

    @Mark Melville – cool – glad you got it working!

    @fsifabio – I believe the issue is being caused by an external JS file adding the XMLHttpRequest property to the global window object (which should not exist in IE6). Try opening SimpleModal and changing:

    var ie6 = $.browser.msie && parseInt($.browser.version) == 6 && !window['XMLHttpRequest'],

    To:

    var ie6 = $.browser.msie && parseInt($.browser.version) == 6 && typeof window['XMLHttpRequest'] != "object",

    Let me know how that works.

  14. Mina

    Hi Eric ,
    Thanks for that wonderful modal but what I’m asking as I’m a newbie in jQuery
    how can I use simplemodal plugin with jAlert plugin i.e adding modal effect to jAlert ?

  15. Amin Sayed

    Hi Eric,

    Excellent Stuff…!!! I just want to know how I can bind any jQuery Calander with one of the text box present in the Modal Pop-Up ?? (say we have a Date of Birth input field in the Contact Form.)

  16. Kathy S

    Hi Eric,

    This is very cool code – thanks. I am trying to display the contents of a text file in the modal, and can’t get the text to appear – the modal box appears with nothing in it. Here is my code:

    $(‘a#test5′).click(function (e) {
    $.get(“test.txt”), function(data) {
    $.(data).modal({
    close:true,
    title:’Test Modal’
    });
    });
    });

    The file test.txt has a few lines in it, but can’t get that to appear. There are no js or php errors. Can you see what I am doing wrong? Thanks!

  17. Eric Martin

    @Mina – I’m not sure that I follow. What exactly are you wanting to do? If you just want jAlert to have an overlay, I’d look more at what they have to see if that is possible.

    @Amin Sayed – typically anything like that would be done in the onShow callback. Example:

    element.modal({onShow: function (dialog) {
  // do your calendar setup stuff here
}});

    @Kathy S – it may be because of the way jQuery parses the response. Try wrapping it in a div, for example:

    $('a#test5').click(function (e) {
  $.get("test.txt"), function(data) {
    var d = $('<div/>').append(data);
    $(d).modal({
      close:true,
      title:'Test Modal'
    });
  });
});
  19. michelle

    hi

    i am having problems in ie6. when the modal dialog appears, all the select boxes on my page disappear. The dialog is small and does not sit over these select boxes and therefore i don’t want them to disappear. how can i prevent this behaviour?

    thanks
    michelle

  20. Seb

    Hi Eric,

    Thx for this nice plugin !
    Maybe juste one option is missing to deal with a smaller browser viewport than modal dialog => if (viewportHeight < modalHeight) modalHeight = viewportHeight, same for width, onOpen and on viewport resize.
    Or maybe I’ve missed something 🙂

    Thanks

  21. Patrick

    Hi,

    Thanks for a great plugin! I have the following problem (tried to wade through the posts above, sorry if I am missing something):

    I am using simplemodal to show a modal with a rather large height. It fits fine in usual screen resolutions, but if someone has a few browser toolbars, large browser buttons, 640×480, etc., the bottom of the modal content may get clipped. And since the modal is ‘position: fixed’, there is no way to scroll the clipped content into view, the modal just scrolls with the page.

    So, does simplemodal require ‘position: fixed’? I went ahead and tried changing the 3 instances of ‘fixed’ in jquery.simplemodal.js to ‘absolute’, and this allows a user to scroll down to see the clipped content in Firefox, but not IE.

    Sounds like there is a function that simulates the ‘fixed’ behavior in IE? I’m a newbie, so not sure how to remove it safely or otherwise allow scrolling of the entire modal in IE.

    Any help much appreciated.

    Thanks,
    Patrick

  22. Aaron

    Great plug-in! I have a problem in IE7, where if I use jQuery UI tabs, the opacity is 100%, no matter the opacity setting. If I remove the tabs, the opacity is fine. Any help would be great.

  23. Peter

    Hi,

    is there almost a solution regarding the problem with the autoheight?
    I have dynamic content so I can’t define a fix height.

    I have seen that there were several people asking about this problem …

    Thanks and all the best,
    Peter.

  24. Doug

    Is there a way to prevent scrolling, globally? I have a slider opening up in the modal dialogue. In IE6, when you pick the element that slide, the page behind the faded modal dialogue slides with it. In FF, it just stays put as you’d expect.

    So, is there a way to “double” lockdown the users ability to scroll?

    Doug

  25. XCarlos

    Hi! Thanks for developing such an useful plugin.

    I’ve got one doubt. I use the “onOpen” callback to animate the dialog opening, something similar to “simplemodal contact”. I also need to use “onShow” callback, but I noticed the function gets called before the opening animation is finished. I put a $(…).append(“Hey”) for testing in the show callback and the text is written in the document almost immediatly after I click the link that opens the dialog.

    Am I doing something wrong here? Thanks in advance!

  26. Simon

    Hi

    Can’t seem to find this bug on here anywhere but form dropdown boxes show through in IE6?

    Is there any fix for this? Thanks…

    Simon

  27. Elliot

    Hi Eric

    Thanks for this great plugin.

    I’m having trouble getting it work with ASP.NET UpdatePanels. I have an UpdatePanel inside the modal div, and various form elements inside the UpdatePanel including a submit button.

    When the modal div is displayed the UpdatePanel is updated and the form elements are filled using data retrieved from the database. The idea is that users can change the data in the form elements and then click the submit button to update the database. However, the submit button does not fire when it is clicked. This seems to be the case in Firefox 3, IE 7 and 6 (I haven’t tested in other browsers).

    I’ve tried calling “__doPostBack(‘buttonID’, ”)” when the button is clicked. This seems to work to generate a server callback, but the form values are not maintained – ie. the server thinks the form values are empty even though they were filled when the modal div was displayed.

    Do you know how I can get this working with ASP.NET UpdatePanels? Apologies if I am missing something obvious.

    Many thanks

    Elliot

  28. John Mc

    Hi Eric, great plugin! I have it working well except for it not automatically centering itself. I have left out the position settings like suggested in the documentation, but it is positioning itself at the bottom left of the page in all browsers.

    Any ideas?

  29. Ron

    Hi, I’m trying to create a Save/Cancel senario. I got it to the point that both links close the window…but they both call the same close callback function. I need to put my save routine in the close callback function. Cancel should just close the dialog. How do I tell the close callback to skip the save logic if the Cancel button is clicked?

    Thanks!
    Ron

  30. Eric Martin

    Sorry all for the delayed responses!

    @michelle – It is being caused by the iframe that is added by SimpleModal to prevent form object from bleeding through the dialog. In other words, what you are seeing is the intended behavior. For a modal dialog, typically you would not want the user to be able to interact with the parent page. You could edit the code to prevent the iframe from being created or have it be the same size and position as the container.

    @Seb – that is a good suggestion. It is on my list of things to address.

    @Patrick – if you don’t use the fixed position, a user could scroll the dialog out of view. The reason changing it to absolute doesn’t work in IE is because SimpleModal addresses IE separately. There are 2 ways that I would suggest working around this issue… 1) prevent the dialog from being larger than the viewport or 2) allow the user to click on the overlay or press ESC to close the dialog. There are examples of how to do 2 on this page (in the comments) and 1 is something that I need to add.

    @Aaron – That is strange. I’m not sure what would cause that…maybe a z-index issue? Do you have a sample page I can view?

    @Peter – That is something that I need to add – or show others how to do in a callback. Off the top of my head, you could try something like (untested):

    $element.modal({onShow: function (dialog) {
  dialog.container.css({
    height: dialog.data.css('height'),
    width: dialog.data.css('width')
  });
}});

    Let me know if that helps any.

    @Doug – well…I once created something that completely prevented the user from scrolling…but it wasn’t pretty and I don’t know if I have that code anywhere. 😉

    @XCarlos – There are a number of ways you could work around this…the easiest would be to place those changes in your onOpen function after the animation effects are finished.

    @Simon – That shouldn’t happen. Do you have a sample page I can view?

    @Elliot – See if the following thread helps you any. I’ll be adding an option in the next version for where to append the dialog.
    https://stackoverflow.com/questions/29174/simplemodal-breaks-aspnet-postbacks

    @John Mc – That’s strange – sounds like you may have some CSS somewhere that is affecting the positioning? Have you checked Firebug to see if that is the case? Do you have a sample page I can view?

    @Ron – I think you should change your implementation. Have the Cancel close the dialog but bind the Save in the onShow callback and handle the logic there. When that logic is done, just call $.modal.close();. Let me know if you have any other questions.

    Whew…going to bed now 🙂

  31. Pingback: Web Pickz » Blog Archive » 75 Useful JavaScript Techniques

  32. Jeremy

    Awesome plugin! I’ve used this on 2 projects in the last month. Thanks for your work on this.

    I did find one bug and have one recommendation:

    In IE7, when viewing a page in standards mode, it appears to still be running the fixIE function. The simpalmodal-overlay receives a position of absolute. I’m using version 1.2.2. Not sure why this is happening.

    Also, my site’s CSS sets the body’s width to 960px (centered). So when the fixIE function runs, document.body.clientWidth and document.body.scrollWidth return a width of 960px for the overlay, when it needs to receive the width of the browser window. The overlay will also be positioned absolutley within that 960px centered width. As a temporary fix, I’ll be setting the body’s width to 100%, and adding a container DIV to restrict the width of the site to 960px.

  34. Gregg

    Hi Eric,

    I’m building my very 1st site, so sorry if this is the most stupid question you ever had. I managed to install the simplyModal and it all works great, thanks for sharing it but when it comes to doing the animation on open and animate on close I dont know where to write the function or where to write the callback. Would you mind pointing me in the right direction.

    Thanks

  35. Eric Martin

    @Gregg – I suggest checking out the demos and tests (links at top of page). Both have examples of using the different callbacks. Email me if you have any particular questions.

  36. Gregg

    Hi Eric, i did check there and I checked the source codes but i couldnt see where they are written.
    Like i have this code
    /**
    * When the open event is called, this function will be used to 'open'
    * the overlay, container and data portions of the modal dialog.
    *
    * onOpen callbacks need to handle 'opening' the overlay, container
    * and data.
    */
    function modalOpen (dialog) {
    dialog.overlay.fadeIn('slow', function () {
    dialog.container.fadeIn('slow', function () {
    dialog.data.hide().slideDown('slow');
    });
    });
    }

    and i have


    $('#modalContentTest').modal({onClose: simplemodal-close});

    But in what file do i put them in? Do they go in the html document where i have the modal display, or do i put them in the file basic.js, jquery.js etc. i tried lost of different ways but couldnt get it to work

    Sorry to be so thick but this is all new to me. hehe

  37. Eric Martin

    @Gregg – You should put the modalOpen function in basic.js and change your modal call to:

    $('#modalContentTest').modal({onOpen: modalOpen});
  38. Kamy

    Hi:
    First off this is a great script, keep up the awesome job.

    Secondly, I’m having trouble submitting a form, after user confirms their selection.

    In the confirm.js file, I changed the code a bit from :
    window.location.href = 'somepage.html';

    to
    document.LsForm.submit();

    however that didn’t work.

    It seemed like someone had a similar problem on this page, but there was no replies to him/her.

    Could you help please?

    thanks

  39. Kamy

    Sorry for double comments; now that my first comment finally worked:

    I noticed in the confirm page that the webpage gets redirected, however I need the form that is using this script to be submitted
    I tried and changed the window.location.href

    to document.LsForm.submit()

    but it didn’t work.

    Can you hel p please?

    thanks

  40. Gregg

    Sorry, i didnt realise i sent you the wrong function there, I just copied and pasted from the test page. Where do i put the call? does that go in the html doc? beacsue i dont see it in the source code in the test pages.
    Thanks

  42. Martin

    Hi Eric,

    I just found an issue with SimpleModal when using jQuery > 1.2.6. Everything works fine in Firefox 3 and IE7, but in Opera (9.25) and Safari (3.0.4) the modal overlay is displayed incorrectly. The overlay only covers part of the document (body?) but not the entire page. Also, the opacity fails in Opera.

    To make sure it wasn’t just my code I downloaded the “Basic Modal Dialog” from your demo page and tried it with different versions of jQuery and I was able to reproduce the same issue using your demo code.

    I don’t know if you already are aware of this issue, but I thought I should let you know.

    – Martin

  43. Richard

    Eric,

    I’m using your basic modal. Is there any way to preserve the modal’s current state when closed and reopened?

    For example, I added a text input to my modal. When I click my ‘Open Modal’ link, the modal opens. I then type text in the text input. Next, I close the modal. Finally, I reopen the modal and the text is gone..

    Thanks

  44. Martin

    @Richard,

    I think you want to use the option “persist”.

    Example:

    $(“#content”).modal({persist:true});

    If you search for “persist” on this page you can find more handy discussions/information regarding this option.

    – Martin

  46. Anders Rune Jensen

    Saw the new release. Cool stuff! I upgraded and checked if this was fixed:

    “I just upgraded to 1.2.2 and the centering is very nice. Though sometimes it doesn’t work. It seems that the problem is related to low browser resolution and big popup. The content is not too big, I capped it at 80% of the browser resolution and added scrollbars. If I resize the window the popup will center properly.”

    Sadly it still seems to be there. Browser is firefox 3.0.7.

  47. Eric Martin

    @Kamy – not 100% sure what you are trying to do, but with jQuery, you can do something like:

    $(form).submit();

    You’d want to put the id of the form (#formId) or probably some other qualifier in place of form, as that would submit every form on your page.

    @Gregg – glad you got it working.

    @Martin – It appears that there are a number of issues in jQuery with $(window).height in certain version of Opera and Safari. I’ve filed bugs for these issues and will work on a workaround. Thanks for letting me know!

    @Anders Rune Jensen – doh! Sorry about that. I’ll create and issue so I don’t forget it. Thanks for the reminder!

  48. Ben

    Eric,

    First of all I have to say: great plugin!

    I noticed that there are issues when there is a video/flash in the main page: it does not go behind the new layer.
    This happens when the old(?) “object” – “embed” code is used. When using the AC_FL_RunContent function they seem to work ok – at least the flash that i checked.

    Now, playing around a bit I came up with the following thingie:


    // create the overlay
    this.dialog.overlay = $('')
    .attr('id', this.opts.overlayId)
    .addClass('simplemodal-overlay')
    .css($.extend(this.opts.overlayCss, {
    display: 'none',
    opacity: this.opts.opacity / 100,
    height: w[0],
    width: w[1],
    position: 'fixed',
    left: 0,
    top: 0,
    overflow: 'auto',
    zIndex: this.opts.zIndex + 1
    }))
    .appendTo('body');

    The only thing different from your code is the “overflow: ‘auto'” which somehow(?) hides all the videos/flash when the new layer opens.

    Unfortunately though (now that I tested a bit more), it does not fix the issue in Chrome, Safari and Opera… It fixes the issue in IE, FF. (i’m keeping this info in the post as it might give you a hint for a fix!)

    For this reason, i thought of manually hiding the videos/flash. But since it is a more complicated solution, I wanted to ask you first what do you think about this issue and if you would like to have a look and perhaps provide another more “script-friendly” and global solution!
    It is a quite common issue, so any help is very very much appreciated!

  49. Ben

    …back with more requests 🙂

    how about allowing more than one layers?

    i.e. when having a layer already, having in there content that triggers another layer above the current..

Comments are closed.

Scroll to Top