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

    hi,

    I’m new in jquery and I’m wondering how can i use your plugin to open a modal window but, instead of showing html code from a div inside the page, doing it from a external html file.

    I’ve tried:
    $.load(“cv.html”).modal();

    but nothing happens. any suggestion?

  2. Nazgulled

    I think I managed to close the modal dialog like you said to do it Eric. So, about #2, is the following what you meant?

    $('div#popup-wrapper').fadeOut(250, function() {
    $('div#popup-overlay').fadeOut(100, function() {
    $.modal.close();
    });
    });

    If it’s not, nevermind, cause it’s working… 🙂

    I’m just left with problem #3, the overlay on opera that doesn’t quite work fine… Please read my description above and/or see the post at jQuery google group. Fixing that, and all my problems with SimpleModal are gone for the time being… 🙂

  3. Eric Martin

    @eugene – I’m not exactly sure what you are trying to do. You can email me with more details, if you like.

    @Benkibirugaali – I’ll take a look, thanks.

    @oscarml – afaik, the load function doesn’t work that way. You could try something like:

    var data = $.get('test_data.html');
$.modal(data.responseText);

    @Nazgulled – I don’t have Opera on this pc, so I can’t test. However, if it is working in the demo’s but not your site, it sounds like an issue with your code.

  4. Nazgulled

    But my code is copied from your site demos…

    And like I said before:

    If I open the demo page on your site and test it with Opera, it works well, but if I download the basic sample and test it on Opera, it doesn’t quite work.

  5. Nazgulled

    In case anyone wants to know I think I found out the problem:

    The thing is, in Opera, the whole page(100%) has to be filled with something. I mean, if your page is long enough (you have a vertical scrollbar), you won’t have this problem. But lets say your page only fills like 70% of the screen, the other 30% doesn’t have anything, no elements get there, the is at the 70% mark, if you understand what I’m saying. To fix the problem, you need to make sure your page is filled at 100% on the screen. A simple fix would be the following code on CSS:

    html { height: 100%; }
    body { height: min-height: 100%; }

    This seems to fix it on my testing, however, you may end up with some strange results if your design is complex and uses lots of CSS styling. Basically, you just have to play around with the CSS code and make sure the whole page is filled with something, otherwise, opera will you only re render the page where it has elements.

    Although this code didn’t fix my real live example– for some strange reason, it was working without changing anything, maybe some other changes I did fixed it somehow– but it fixed with all the tests I did.

  6. oscarml

    This is not working:

    var data = $.get(‘test_data.html’);
    $.modal(data.responseText);

    it fills the data var, but doesnt open any modal.

    any idea?

  7. oscarml

    Sorry, I said it doesnt open the modal. Actually, the var data is filled, and the modal windows is openned, but nothing inside.

    any ideA?

  8. Michael Staples

    Hi Eric,

    I was wondering if it would be possible to pass a variable to the contact.php file in your simplemodal contact script, and if so how? I love the script but as always there is something I want to do with it that just isn’t as easy as out-of-the-box. Thanks.

  9. Eric Martin

    @Nazgulled – My suggestion for body CSS

    @oscarml – are you using firebug? Can you inspect the element and see what is there? Is it just hidden? You could try wrapping the response in a div:

    $("<div/>").append(data.responseText).modal();

    @Michael – you could add something like:

    $myVar = isset($_REQUEST['myVar']) ? $_REQUEST['myVar'] : '';

    Then use $myVar in the script as needed.

  10. Nazgulled

    That doesn’t fix the Opera problem, you still need to add min-height to body and it doesn’t matter if body height is 100% or if the html has 100% height, they don’t work alone (for the Opera problem), both, html height and body min-height must be set to 100%, that’s the only way that worked on my tests with Opera.

  11. Michael Staples

    Hi again Eric,

    Thanks for responding I do really appreciate it. I should have explained better what I was trying to do. In your example index.html file, when you click on the ‘button’ to launch the modal window, the window opens and loads contact.php which is the contact form. What I wish to do is: when the button is click, pass a unique email address to contact.php form in the modal window. I have 5 different email address and I want the contact form to be able to email according to which one is selected (clicked) to launch the modal. I hope this explains a little better my problem. Thanks again for a great plugin.

  12. oscarml

    Hi,

    I said this didn´t work:

    var data = $.get(’test_data.html’);
    $.modal(data.responseText);

    but if u add and alert(“”) between both lines, it works. Is a time matter?
    I’ve tried to use callback parameter, but as it’s recursive, i dont know if it’s possible:

    var data = $.get('cv.html', function(){
    $.modal(data.responseText);
    });

    can u help me?

  13. Nazgulled

    Eric,
    I don’t know if this is a normal behavior and if it will be gone when you add true support for modal dialogs, but…

    Changing some modal properties (colors, size, etc…) do not retain it’s properties after closing. For instance: I have this ajax form where I show a blue modal dialog on the request saying it’s processing the form, if something wrong happens with the submission, I change the modal properties to a red popup without closing it first. Then, the user reads the error message and closes the popup, the next popup will still be blue and not retain the red changed properties.

    I just thought that you should know, not sure if this is what you wanted because it took me a while to find out why this was happening and that the “problem” was the way SimpleModal is coded.

    Keep up the good work.

  14. oscarml

    sorry guys, to many hours coding. This works:


    var data = $.get('test_data.html', function(){
    $.modal(data.responseText);
    });

    thx for attending me!

  15. henrik

    i try to generate a list dynamically, where several links should open different modals. i tried it like this:


    <a href="$('#term_AAdClickRate').modal();)" rel="nofollow">Ad Click Rate</a>
    Content 1
    <a href="$('#term_AdServer').modal();)" rel="nofollow">Ad Server</a>
    Content 2

    EDIT: Fixed HTML tags (you need to encode the tags – see the information above the reply textarea)

    but this has not the effect i wanted. nothing happens. does anybody have an idea how i can solve my problem?

  16. Nazgulled

    The current version does not support multiple dialogs. You’ll have to wait for the next version, which may take a whole but Eric can answer you better.

  18. Eric Martin

    @Nazgulled – I don’t have a body min-height and Opera works fine on the SimpleModal test and demo pages.

    As for your second question…Each time you call modal(), it’s going to create a dialog with the default options and any overrides you pass in. I don’t know why you expect it to somehow remember the stying you used on a different dialog…that’s up to you 😉

    @Michael – Well, I think I would do something like:
    1) Add a parameter on the initial $.get call (contact.js) that indicated which email address to use (I wouldn’t use the entire email). Something like:

    $.get("data/contact.php?id=bob", function(data){

    2) Use that "id" parameter to add a hidden field in the contact form with the same values (data/contact.php):

    $id = isset($_REQUEST['id']) ? $_REQUEST['id'] : '';
<input type="hidden" name="id" value="<?php echo $id ?>"/>

    3) When the form is submitted, get the id value again and use that to determine which email to send to.

    I've modified a version data/contact.php with the changes above...give that a try and see if it fits your needs.

    @oscarml - I'm glad you got it working. Did you try my second suggestion?

    @henrik - correct me if I am wrong, but you are not asking for multiple dialogs simultaneously, but the ability to create links for multiple dialogs, right? There is no limitation in SimpleModal for that. The main problem is that your code is incorrect. Try something like:

    <a href="#" onclick="$('#term_AAdClickRate').modal(); return false;">Ad Click Rate</a>
Content 1
<a href="#" onclick="$('#term_AdServer').modal(); return false;">Ad Server</a>
Content 2

    I don't advocate coding this way (using onclick, etc), but I just wanted to show you a working example based on your code.

  19. oscarml

    Hi Eric,

    yes, the second suggestion worked as well but as long as u put it inside the callback function.

    Now I’ve a new problem: if the height of html file I want to put is higher than the modal box, it overflows out of the box. Is there any posibility of putting a scroll bar on the right side of the modal box in order to be able to read all the document with no overflow?

    thx

  20. oscarml

    Wow, you should put an edit mode for the posts, or just “delete ur own post if u are not encourage enough to edit css” hehe.

    Just add “overflow: scroll” to “#modalContainer” class and in “#modalContainer a.modalCloseImg” class change “top:-15px; right:-18px;” for “top:0px; right:0px;” in order not to cover up arrow of scroll control.

    Sorry again for posting before fighting!

  21. Eric Martin

    @oscarml – you might consider adding the overflow property to the div you created with the responseText. Otherwise (depending on your usage), if you put overflow on the container, you’ll experience a problem with the close image (if you are using it). Just a thought 😉

  22. Nazgulled

    Eric,
    I downloaded the demo and it didn’t work on my local opera without that little tweak. But basically, Opera has that stupid bug. If the page layout doesn’t fill the whole area covered by the browser, than it fails to close overlay property. Whatever method fits to anyone to fill up the screen with any html just to make sure everything is covered up, will fix the problem. min-height worked for me 🙂

    About the other thing, I wasn’t expecting SimpleModal to remember anything but I wasn’t expecting the other way around either. Basically, I didn’t know how it worked and I had a modal dialog opened, then I changed some colors (and the message that it displayed) without closing it, then I closed it, and when I opened a new one, the message from before was there but not the colors. That made me wonder why and it took me a while to figure it out…

  24. Lee

    Thank you for timely answer, and sorry for my untimely feedback. Your suggestion for the close function on Feb 4th worked perfectly. I see now I could have figured it out for myself – makes obvious sense. You have provided an excellent plugin, and your support is greatly appreciated.

  25. Richard

    Hey eric.
    Havnt been here in a while. I see you did exactly what i was hoping for, a contactor that works for multiple emails. That will help me out a bunch. But as always, i have a few questions. First, i like to use href links, not an input area to load the contactor, how would u make a link load a contactor for a certain email? and lets say i have 200 emails, does that mean i have to make 200 contact.js’s? and is it possible to echo in the contact form when it loads the email or name of the person your about to email? because some emails are stacked on eachother and i wouldnt want someone to click wrong person and not know it.
    thanks!

  26. Eric Martin

    @varmısın – If you use the $('#basicModalContent').modal(); statement to open a modal window, you must have something in your DOM with an HTML id of basicModalContent.

    @Lee – I’m glad you find the plugin useful

    @Richard – there are a lot of ways to do this, but you could try something like:
    HTML:

    <a href="/contact" id="bob" class="modalContact">Contact Bob</a>

    In the contact.js, replace what’s in $(document).ready(function () { with:

    $('a.modalContact').click(function (e) {
   e.preventDefault();
   // load the contact form using ajax
   $.get("data/contact.php?id=" + this.id, function(data){
      // create a modal dialog with the data
      $(data).modal({
         close: false,
         overlayId: 'contactModalOverlay',
         containerId: 'contactModalContainer',
         onOpen: contact.open,
         onShow: contact.show,
         onClose: contact.close
      });
   });
});

    That way you can use the HTML id to specify which user the email goes to. For non-javascript users, just just enter the url to your actual contact form in the href of the contact link.

  27. Richard

    looks sweet. ill set it up and test it soon. Last thing i was looking at though. i see how it uses the id feature, and in the contact.php i see in the form , you have an input for the $id but its hidden.
    is there a way for me to in the bottom div (div class bottom) in the form to echo or show the name, or even email (prefer name) of the person u clicked to contact?
    i was thinking if the id is bob, can it stick that text so the bottom of the form would say “you are currently contacting (id_name_here)”
    if thats possible with the coding you have now that would be great. ill play around with it. but if you have to recode something or go out of your way, then ill forget about it. your already very helpful and i appreciate this.

  28. Gabriel Sobrinho

    Hi Eric…

    This plugin is working perfect for me. This is absolute good and small! Don’t stop this job…

    I’m having a problem here… If i use $.modal.close(), this don’t use the code especified in onClose. This is a bug?

    Tk’s bro

  30. Fabiana

    hello
    i try your code, is more beauty, but I cannot to send e-mail.
    i think there is problem here

    $.ajax({
    url: 'php/contact.php',
    data: $('#contactModalContainer form').serialize() + '&action=send',
    dataType: 'html',
    complete: function (xhr) {
    .......

    why? where’s my problem?

  31. Ronald

    hello eric,

    cool modal, i have question about focus, when i tab at the end of the textbox the focus shift to the background window, is this the correct behavior?

  32. Eric Martin

    @Richard – if you use the id from the <a> link method, you’ll want to remove the hidden field from the original file I sent you. Then, in the contact form code, you could change the <h1> to be something like:

    <h1 class='title'>Send " . ucfirst($id) . " a message:</h1>

    That’s assuming that you use, for example, an id of bob instead of 1.

    @Gabriel – that is the correct behavior. It’s to prevent an infinite loop if the $.modal.close() is called from within the onClose callback 😉 You could change the SimpleModal source to:

    $.modal.close = function (ext) {
   // call close with the external parameter set to true
   $.modal.impl.close(ext == false ? ext : true);
};

    Then you can call $.modal.close(false); anywhere you like, as long as it’s not from inside your onClose callback.

    @Fabiana – I’d need some more details. Is the contact.php file in a folder called php? What is happening?

    @Ronald – it’s not the correct behavior in that a truly modal dialog would not allow that, but it is the correct behavior in that the code does not currently prevent it 😉 It’s something that I’ll be trying to resolve in the next version.

  33. Richard

    well at first i couldnt get it to work, but i removed the commenting tags from the ids in the contact.php and it all works perfectly now.
    thanks so much

  34. tom

    hi,
    is there any solution to get it work with .scrollable plugin? i want to open new modal with (ex 400×400 px) with scrolled table inside – but there are no scroll bars for such generated table.

    scrollable code works without before .modal call;

    any ideas?

    t

  36. oscarml

    @oscarml – you might consider adding the overflow property to the div you created with the responseText. Otherwise (depending on your usage), if you put overflow on the container, you’ll experience a problem with the close image (if you are using it). Just a thought 😉

    Hi Eric,

    I’ve tried to add overflow: scroll to my div but doesn´t work. The scroll bar appears but it still overflow at the bottom of the container. Other css properties applies ok (background-color for example).

    I’ve solved the problem with the image placing it on the left side of the upper arrow of the scroll.

    Any suggestion?

  37. Edemilson Lima

    Can I use SimpleModal to display large content, like an entire HTML page? Will it fit the window to the content and to the browser? Will it display scroll bars?

  38. oscarml

    Hi Edemilson,

    check all my posts in this page, I wanted the same. To sum up:


    var data = $.get('test_data.html', function(){
    $.modal(data.responseText);
    });

    About the other questions, we’re discussing about that: I tried putting the propertie overflow: scroll in the container div, but u get problems with the closing image because. You need to move it from behind the scroll upper arrow.

    Eric suggested me putting the overflow property in the div I’m gonna load (html file), but that doesnt work.

    Now, we’re waiting for answer ;P

  39. nicmare

    this seems to be a awesome script!
    but you use the ids content, header and container. exactly the ones i am using. because that are the standard ids for designing a website. therefore its very difficult to get it work correctly because the css overlays my one. heres my suggestion: please use specific idnames for example modalheader, modalcontent!
    best wishes…

  40. nicmare

    what do you think of a esc key function for escaping the modal dialog? some users are used to it. is that possible in next version?

  41. nicmare

    and one more sentence: i just deleted your css (header, content) and now it works perfectly :). i just did not read your comments in css and thought your styles are linked to things in js file. sorry for that =)

  43. Eric Martin

    @Richard – glad it’s working!

    @tom – I’ll take a look…

    @oscarml – Try the following CSS:

    .modalData {
   overflow: auto;
   width: 100%;
   height: 100%;
}

    @Edemilson – SimpleModal does not do any dynamic sizing of the modal dialog window…you have to tell it the dimensions up when you initialize it (or in your CSS). Same with scrolling…you have to apply the overflow property where desired. (See comment above)

    @nicmare – The class and id’s are set to modalOverlay, modalContent, modalData, etc…which can also be changed, if desired. As for the ESC/close feature…it’s on my list of things to add.

  44. Gabriel Sobrinho

    Hi Eric,

    I have other suggestion 🙂

    If user click in overlay, on showing modal, the modal close.
    Its simple method to close the modal more faster…

    Tks again

  45. Eric Martin

    @Gabriel – I personally don’t like the click-to-close on the overlay, but it would be easy enough to do in the onShow callback (untested):

    onShow: function (dialog) {
    dialog.overlay.one("click", function (e) {
        $.modal.close();
    });
}
  46. oscarml

    Eric, ur suggestion doesn´t work. Anyway, don’t worry, is working fine.

    Thx again for such a good plugin.

  47. Gabriel Sobrinho

    @Eric – Tks Eric, working ok…

    Bug???

    I don’t knows if is a bug, but the overlay div don’t working correctly in IE6.
    The overlay size is equal content size, not from window (visible) size.

    Simulate:


    ---------
    |Content|
    | |
    | |
    ---------

    I’m creating a HTML demo for this bug (?) and post this for you later.
    Verify the Simple Modal in IE6, ok?

    Tks

  49. nicmare

    hi eric,
    im not sure but i guess i found a bug?!
    obviously its not possible to use {close: false}); twice.
    so i want to run test “Modal Function w/ string/HTML – close: false” at least two times on my website because i want to avoid the X on top right. therefore i wanted to format all my overlays with a own close button in the overlaybox. but when i use {close: false}); more than one time, it wont work. whats wrong here?
    on your test site is just one case with {close: false});. did u try two functions with {close: false});? please test it and u will see it wont work anymore :(.

Comments are closed.

Scroll to Top