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

https://www.ericmmartin.com/simplemodal/

Tests

https://www.ericmmartin.com/simplemodal-test/

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”

Davis
May 30, 2008 at 10:33 am

@Eric,

I have fixed file upload issue using ajaxform, pretty cool jquery plugin.
Thanks for all your help.
bubbles
May 31, 2008 at 3:05 am

Hi Eric,

Firstly, Excellent plugin !

I am using the contact form to retrieve a users email address. However I want to call this form repeatedly to retrieve different email addresses. Is there any way I can pass in the (email) text field which I want to populate with the value entered on the simple modal contact form? Otherwise I will have to duplicate the javascript code for the form each time I want to retrieve a different email address.
James
May 31, 2008 at 4:19 am

Hi,

I want to use this on multiple links on the same page displaying different content inside the box each time. How would I do this?
Kevin
June 2, 2008 at 10:40 am

You should really change the CSS that tells the mouse to use the wait cursor—I always think that its locking up the browser! And in Opera the close button doesn’t load so I have no way to close it =[
Daniel
June 2, 2008 at 11:30 am

I’m having a problem with IE6 and IE7. For whatever reason, when I set the modal box to display:none; it causes my background graphic in the div to disappear. When I take out the “display:none” it works fine, but then the div shows at the bottom of the screen. Any ideas?
Eric Martin
June 2, 2008 at 11:41 am

@Davis – glad you got it working 😉

@Dobes – Here are a couple links about the issue:
https://extjs.com/forum/showthread.php?t=1519
https://livepipe.net/community/control_suite/181

I think my demo’s and test’s don’t have the issue, so it should just be a matter of tweaking your CSS.

@Bastor – I don’t have anything built-in, but there are certainly plenty of jQuery shadow plugins available:
https://www.google.com/search?q=jquery+shadow

@bubbles – there have been others that have asked a similar question. I’ve given some ideas above…but basically, you’d have to modify the JS file to look for the address or identifier from the link itself.

@James – wire up a modal call for each link…see the tests for examples. If this is not what you are asking, let me know.

@Kevin – 1) if you don’t like the cursor, feel free to change it 😉 2) Are you referring to pages on my site or your own? When I view the demos and tests in Opera 9.25, I see the close icon.

The beauty of SimpleModal is that you can very easily modify any of these behaviors to fit your needs.
Andes
June 3, 2008 at 2:58 am

Love the contact form.

… But. When I Download The Contact form to my machine, it won’t open when i click the button. The background fades down but the contact form won’t show up.

Im new to this, is there anything, that I maybe have forgot to install? (work on mac 10.4.9 with firefox and safari)
Armando
June 3, 2008 at 6:09 pm

hi, i’n new to al this .jquery stuff, i’m trying to get a working contact for in wordpress 2.5 i downloaded, and activated the plugin, everything goes well, but y don’t get the mail form windows when i click the link, i just get a http://www.loki-studios.com/contact not found message, i just want a simple contact form that pops up, what am i doing wrong? can someone help me with this?
denis
June 9, 2008 at 8:07 am

Hi,
thank for your great piece of code.
I’m currently using it with success in a page of my site, but I’ve a problem with another one, occuring only in IE7.

The source code for a test page reproducing the error is the follow:

Test
Pagina di prova con popup function avviaPopup(){ $('#basicModalContent').modal(); }

Every time I try to open the page, IE7 complains about an error on line 19.
I’m not able to overtake this problem, can you help me on this issue ?

Thank you,
Denis
Simon C
June 16, 2008 at 5:49 pm

Eric, your plugin is awesome. It’s helped me learned a lot about JS and jQuery in general.

Got a question (for both Eric and anyone else who might know). In IE8, when I call modal(), the background opacity is complete no matter what I set it at. I’ve tried this with a couple of other jQuery plugins and had the same result. Is this something deeper in the framework that is causing this or a bug of IE8 with modals?

I went to Facebook to see if it was affecting all modals, and it was not.

If anyone has any insights into this problem, let me know!

Cheers,
Simon
Konstantin
June 19, 2008 at 3:40 am

https://www.ericmmartin.com/projects/simplemodal/#comment-1158

Hi,

That code help me to solve my problem.

body { background: url('/images/spacer.gif') no-repeat; background-attachment: fixed; }

In IE script working not so fast than in FF, but better and faster, than earlier.

Thx.
Jim
June 20, 2008 at 10:26 am

I am writing a page that appears in an iframe within another page. The iframe with my page usually has a scroll bar. The top window does not. I’d like to have an overlay cover the document in top window instead of the document within the iframe. I can insert a div in the top frame like this:
var overlayDiv = jQuery("#srgModalOverlay", top.document); if(overlayDiv == null) { jQuery("div#portalOuterContainer", top.document).append("\n\n"); } else if(overlayDiv.length == 0) { jQuery("div#portalOuterContainer", top.document).append("\n\n"); }
From my document, is there a way to launch the modal dialog in the document that contains the iframe?

Thanks.

Jim
Jim
June 20, 2008 at 10:31 am

Sorry. Here’s the code:
var overlayDiv = jQuery("#srgModalOverlay", top.document); if(overlayDiv == null || overlayDiv.length == 0) { jQuery("div#portalOuterContainer", top.document).append("\n<div id='srgModalOverlay'></div>\n"); }
Shawn
June 20, 2008 at 11:49 pm

Hi Eric,

Thanks for the plugin. Very nice work! I have implemented it on a page with a flash movie. I am using the CSS for the contact form dialog. When the modal box appears it is below the SWF. I set the z-index of the swf to -999 but it still shows up below the movie. Do you know happen to know a fix?
Shawn
June 21, 2008 at 12:04 am

Also, is there a way to dynamically load the script that controls the dialog (contact.js for example) on a button click instead of loading each .js file on initial page load?

Thanks.
Percy
June 21, 2008 at 12:58 am

Hi!!!, I have a problem with Browser IE 7, efect appears in FIREFOX 3.0 but not in IE 7, what is the problem, please help me.

IE 7 show contact form fast, and appear horizontal barr, I don’t understant
Eric Martin
June 21, 2008 at 5:54 pm
@all – sorry for the lack of responses…between work and a week long vacation, I’ve been a little busy 😉

After this, I’ll be closing the comments on this page. For support, you can use the jQuery mailing-list or contact me directly.

@Andes – you shouldn’t have to install anything, but it does need to be used through a web server, as

it makes an Ajax call to a PHP file. I’ve seen the issue you are talking about with the WordPress SMCF plugin, but not with the Contact Demo. If you have a link that I can view, let me know.

@Armando – sounds like something is not setup correctly. I tried to view the link, but the site doesn’t appear to be up.

@denis – sounds like an issue with your code. Could be a conflict or any number of things, but without seeing what you have, it’s hard to tell.

@Simon C – thanks! As for the IE8 issue, it looks like it might be an issue with the jQuery opacity function, but I haven’t had time to look into it any further. Since IE8 is in early beta, I wouldn’t worry about it too much…I’m sure either IE or jQuery will get it sorted out 😉

@Konstantin – interesting. Sounds like it’s maybe an issue with something on your site?

@Jim – if I understand you correctly, you’d probably have to modify the code to accept an “option” of where to append the overlay (and/or iframe). For example (untested), you could call SimpleModal with:
```
$.modal({target: selector})
```
And then modify the src, changing the following part in the this.dialog.overlay and this.dialog.iframe .appendTo('body'); to:
```
.appendTo(this.options.target ? this.options.target : 'body')
```
@Shawn – try using SWFObject like Asle did. To your second question, have you tried $.getScript?

@Percy – do you have a link? It sounds like an issue with your site/code…

Comments are closed.