SimpleModal

v1.1.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 to SimpleModal.

Demos

http://www.ericmmartin.com/simplemodal/

Tests

http://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

This project was created on Friday, January 4th, 2008.
You can follow any responses about this project through the RSS 2.0 feed.
You can skip to the end and leave a response. Pinging is currently not allowed.

218 Responses to “SimpleModal”

andres
January 4th, 2008 at 11:10 am
Hi, I have a doubt. Could I use two callback in the same time, because it will be helpfull to me to use onOpen and onClose.
Thanks!!!
Author Comment
Eric Martin
January 4th, 2008 at 1:59 pm
@andres - Yes, you can. You can use all of the callbacks together, if you like.

Example:
```
$('#someElement').modal({
    onOpen: myOpenFunction,
    onShow: myShowFunction,
    onClose: myCloseFunction
});
```
David
January 4th, 2008 at 2:16 pm
Hi Eric.
Your plugin it’s excelent.
It’s possible some more demo for beginers
Thank you
David O.
Author Comment
Eric Martin
January 4th, 2008 at 2:39 pm
@David - Thanks! I put up a link to the test, which has some more examples. As I find time, I’ll also add more to the demo page.
David
January 5th, 2008 at 1:58 pm
Hi Eric.
I have 2 question:
1. It’s possible nested modal window?
2. how define containerCss: ({}) The CSS styling for the container div ?
it’s possible example ?
Thank you
David O.
Author Comment
Eric Martin
January 6th, 2008 at 10:22 am
@David -
1) No, it is not possible to nest modal windows. If you have a compelling reason to do this, let me know and I’ll consider adding that ability.

2) There would be two reasons to use containerCss and/or overlayCss. a) you don’t want to use an external stylesheet to style to modal dialog and b) you want to override values from an external stylesheet.

Example:
```
$('#modalContentTest').modal({
	containerCss: {backgroundColor: '#ff0000', border: '6px solid #000'},
	overlayCss: {backgroundColor: '#fff'}
});
```
roger
January 6th, 2008 at 9:57 pm
I am french…

Nice nice nice, congratulation

Thank you
Roger
Andrey Sterlin
January 7th, 2008 at 12:54 am
Good work! Thanks!

I think it more useful to change

left:588px; in #modalContainer a.modalCloseImg

for

right:-15px;
Dmitry
January 8th, 2008 at 7:45 am
I found memory leak problem in IE. This problem occur practically in all simular plugins. It’s no good.
Author Comment
Eric Martin
January 8th, 2008 at 9:08 am
@Roger - Glad you like it!

@Andrey - Good suggestion. I’ll update the CSS and documentation.

@Dmitry - Care to elaborate? What is the leak, how did you identify it, etc.
Logan
January 10th, 2008 at 3:34 pm
any static function I can call to close modal window rather than click the close link within the window
Author Comment
Eric Martin
January 10th, 2008 at 3:40 pm
@Logan - The following should work:
```
$.modal.close();
```
Logan
January 10th, 2008 at 3:54 pm
great thanks, but it throw an error when call $.modal.close(); to close the modal window after it has been closed by clicking on the click link manually.
I am wondering if you could add a condition within the close function to detect if the modal window still alive before any further.
or if you could provide me a solution to check whether the modal window is alive.
thanks
Author Comment
Eric Martin
January 10th, 2008 at 4:12 pm
@Logan - good point I’ll need to fix that. All you need to do is add the following in the close function:
```
if (!this.dialog.data) {
	return false;
}
```
So, you should end up with:
```
close: function (external) {
	if (!this.dialog.data) {
		return false;
	}

	if ($.isFunction(this.opts.onClose) && !external) {
		...
	}

	...

}
```
UPDATE: Fixed in the 1.1.1 release
Logan
January 10th, 2008 at 4:21 pm
cool as
Hannan
January 11th, 2008 at 12:59 am
wow, excelent…

Your plugins is cool, but can we make the modal dialog shows centered on the page with eazy?
(i’m sory for my bad english)

thnx.
kadir doğan
January 11th, 2008 at 7:20 am
Hi,

I used your simplemodal jquery plugin for my project. But i want to open a simplemodal when a video playing background. Can you help me about this problem?.

http://img236.imageshack.us/img236/1392/transvideodx9.gif
Author Comment
Eric Martin
January 11th, 2008 at 9:38 pm
@Hannan - Thanks! Are you asking about horizontal or vertical centering? All of the examples (tests and demos) have dialogs that are horizontally centered on the page.

@kadir - What is the problem that you are having? Just the opacity of the “container”? If so, you could just do something like:
```
$('#modalContent').modal({
	containerCss: {opacity: .4}
});
```
Since the data is inside the container, it will inherit the opacity value as well. This requires v1.1.
Miroslav
January 13th, 2008 at 5:01 am
Hi Eric,
Excellent jQuery addition, thank you very much!
kadir doğan
January 14th, 2008 at 5:05 am
hi again,

the problem is that the embedded video playing at the background disappears when the modal window appears.
my screenshot contains the scene I’d like to achieve.
do you know any workaround to bypass this problem?
thanks in advance.
dong
January 14th, 2008 at 8:37 pm
I’d like embed your script into Drupal but unfortunately, your script not runs with jQuery old version 1.1.2. Can you show me how your script run with jQuery 1.1.2?

Thanks a lot.

Dong
Author Comment
Eric Martin
January 14th, 2008 at 11:30 pm
@kadir - what browser are you using? The sample I showed should work unless the video itself is doing something funny.

@dong - SimpleModal is compatible with jQuery 1.1.2. If you are trying to use the contact form, the animations require jQuery 1.2+. Let me know…
kadir doğan
January 15th, 2008 at 7:01 am
i’m using firefox 2.0.0.11. i tested for youtube video player (simplemodal on a embeded SWF) and it worked. But neither VLC nor Media Player not worked. in our application, we are supposed to use vlc plugin on firefox for playing media.
Author Comment
Eric Martin
January 15th, 2008 at 9:47 am
@kadir - I was testing with a YouTube video. I’ll try the other ones and get back to you.
Guillaume
January 16th, 2008 at 3:06 am
Hello ! Nice plugin you have here !

Maybe it’s really obvious but I was wondering how I could pass a variable to $.get(”./simplemodal/data/myform.php”, function(data) {}
so that it calls myform.php?var=xx where the xx is something I have in the URL of the main page (eg $_REQUEST[’var’] in php). I hope I’m clear

Thanks
G.
Guillaume
January 16th, 2008 at 3:41 am
ok I think I’ve found a solution using a hidden input field and accessing it thanks to its id within the get call

$.get(’./simplemodal/data/myform.php?itw=’+$(’#numint’).val(), function(data){…}
elvis
January 16th, 2008 at 10:09 am
I just admire people who can make this kind of js. Just I can’t close my jaws and saying wow.
I am a beginner and please excuse my elementary question. I installed the contact form in my testing website, and looks great, but it doesn’t send email. How can I make it to send email? Do I need to put any code or modify any php? If I will be grateful if someone can help a newbie.
Regards.
Jatin
January 16th, 2008 at 10:25 pm
Hi Eric, this is an excellent light weight plug-in. Is it possible to have the popup vertically centered? I noticed the window is controlled by the top and left values in CSS, but it would be good if it would stay in the centre of the browser (to maximise real estate and have no gaps at the top or left on small screen resolutions). Thanks for your help.
Author Comment
Eric Martin
January 16th, 2008 at 11:05 pm
@Guillaume - glad you got it worked out

@elvis - when you say it doesn’t send email, what exactly is happening. Does it say it it was sent or that there was a problem? Double check the “To:” email address. Contact me directly to troubleshoot.

@Jatin - Currently it is set to be 15% from the top, but you can simply change the CSS, according to your needs:
```
#modalContainer {
  height:400px;
  width:600px;
  left:50%;
  top:50%;
  margin-left:-300px; // half the width, to center
  margin-top:-200px; // half the height, to center
  background-color:#fff;
  border:3px solid #ccc;
}
```
You’ll need to update the IE CSS as well…
Neil Merton
January 17th, 2008 at 1:46 am
Just wanted to say well done and congratulations on creating this simple to use modal plugin for the jQuery library.

Keep up the great work!
Bruce
January 18th, 2008 at 3:47 am
Is it possible to load a pdf file or a web page held at another website into a modal dialog? If so, any chance of example code?

Thanks/Bruce
matt
January 18th, 2008 at 5:58 pm
i have integreated your contact but cannot seem to get the dialog to load when i click the button. I have scanned over code and included all files needed for inclusion but still i cannot get the dialog to pop up. Is there anything further needed for the dialog to pop up?
Author Comment
Eric Martin
January 18th, 2008 at 10:08 pm
@Neil - thanks, I appreciate the kind words!

@Bruce - it is possible, by embed it into an object/embed tag. I used a file from scribd.com and was able to get it to display.

@matt - are you using the code from the demo? Do you have a link that I can see? You can contact me privately, if you like.
chris
January 20th, 2008 at 4:06 pm
I seem unable to be able to call the script on unload of a window? I imagine this is my fault either doing it wrong or not understanding the limitations of the language/script, but I would very much appreciate any direction you can offer. I love the functionality, and its exactly what I have quite a few clients asking for. I imagine it would look something like this

$(window).unload( function () { $('#Content').modal(); });

Thanks much.
kadir doğan
January 22nd, 2008 at 12:13 am
I was testing with a YouTube video. I’ll try the other ones and get back to you.

Hi Eric,

Could you test it?
john
January 22nd, 2008 at 9:45 pm
Hello, thank you for putting this together. I have been looking hi and low for just this thing. Perfect. We all owe you one man.

Anyway, my question is can you have two or more simple windows going at the same time, one would be lets say 300px by 400 and another sized diffrents for a diffrent purpose.

Also is it possible to change the class name #modalContainer to something that is more unique? One app I am working on will be a widget that will be placed on many other website that are out of my control. Chances somebody else having a modalContainer class name could exist. Thank you again.
Author Comment
Eric Martin
January 23rd, 2008 at 9:49 am
@chris - if you are trying to catch when a user leaves a page or closes the window, you need to use the onbeforeunload event. It has it’s own built-in dialog, so as far as I know, it would be difficult (if not impossible) to display a modal dialog in place of the built-in confirmation. I spent some time trying something similar in an app, and ended up just using the built-in dialog.

@kadir - sorry for the delay. I tried out a few tests last night and I couldn’t get a transparent div to show the video (vlc or mov) behind it. It must be a limitation of the embedded video player itself.

@john - i’ve had a few request for this recently. It would take some re-design of SimpleModal and I’d still need to understand the exact requirements. For example:

- the first instance creates the overlay, container and data div
- the second instance creates an additional container and data div, with a different z-index, but does not create an additional overlay.

Does that sound right? I’d guess that would require the ability to “move” the containers as well? Or would it just be up to the CSS positioning?

Contact me with ideas/input and I’ll see if I can put something together…

As for your last question…the class name is hard coded, but you can change the ID of the element when you create it $.modal(elem, {containerId:'myUniqueId'})
Vadim
January 26th, 2008 at 11:40 pm
About nested (or multiple) modal windows request…
It will be quit useful (actually I am looking for this feature as well). Example from the real life… I use your modal window to display the list fo private messages for a user and I would like provide ability to respond without exiting the list of messages.
Adrian Labastida
January 29th, 2008 at 12:22 pm
Hi Eric, great plugin you got there!!

I just have a question, im using your plugin to put a modal alert on my site, i based on the confirm demo, so its a copy/paste and just some edition on it… now the issue that i have is that on IE7 i cannot get the overlay to cover the full area of the site, it just covers the first visible area of the page, what could be doing that?

I mean i got the confirm.css and confirm_ie.css files just edited a bit of the colors and thats it, but i cannot get the same overlay coverage on my site than in your example… any suggestions?

This just happens with IE7, FF is working great.

Thanks!

Adrian
Author Comment
Eric Martin
January 29th, 2008 at 12:45 pm
@Adrian - I just double checked the demo and it works correctly, so it must be something in your page. What DOCTYPE are you using? Do you have any CSS applied to body or html?
Adrian Labastida
January 29th, 2008 at 2:53 pm
There isnt any css applied neither to body nor html, and there aren’t any DOCTYPE declared, do i have to have one to make it work correctly?

Thanks Eric!
Adrian Labastida
January 29th, 2008 at 3:20 pm
BTW, the page is a JSP, sorry
Adrian Labastida
January 29th, 2008 at 3:28 pm
Ok i did put a DOCTYPE for it, the line i added at the beginning of the jsp is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

But im having the same issue, the overlay div is only at the size of what i can see, but if i move the scroll down or right i see the elements below not covered by the div and i can click on them… do you have a suggestion to apply some sort of style to the created overlay div to fix this?

Thanks!
Adrian
Author Comment
Eric Martin
January 29th, 2008 at 4:24 pm
@Adrian - can you email me some sample code or send a link? It’s hard to troubleshoot without seeing something
Todor Stefanov
January 30th, 2008 at 9:45 am
Hi Eric,
I also need ‘nested modals’ feature. I need it to update an entry form modal ‘records list’.

Thanks!
Todor
Adrian Labastida
January 30th, 2008 at 9:47 am
Eric, i made it! It worked ok using the methods Screen.getDocumentHeight, and Screen.getDocumentWidth from http://www.javascripttoolbox.com/lib/util/documentation.php just integrated those methods and modified the jquery.simplemodal.js in the function fixIE section to make it to work, just changed the vars:

fixIE:function(){var wHeight=Screen.getDocumentHeight()+’px’;var wWidth=Screen.getDocumentWidth()+’px’;

it works great!!
Regards!
Adrian!!
senthil
January 30th, 2008 at 11:51 am
I use your modal window for displaying alert and confirm message.. Its really working great.. thanks a lot for your work..

i have a small issue.. in small screens, the ok button goes below the screen visible area, and scolling doesnt help, as the modal window also gets adjusted accordingly and still ok button is not displayed..

Is there any way to prevent adjustment of modal window?
Adrian Labastida
January 31st, 2008 at 3:13 pm
Eric, Adrian here again, i have another question for you…

Nowadays with the actual overlay of your simplemodal tool, you can select the elements below it using the tab button and execute its functions, is there a way to avoid it without blocking the tab key with JS?

Thanks!!
Adrian
Adrian Labastida
February 1st, 2008 at 4:32 pm
Hi Eric… Is there a way to make a simplemodal window draggable??

Thanks!
Adrian
Lee
February 2nd, 2008 at 9:14 pm
this is a trivial issue, but I’ve tweaked the css and js and can’t seem to find the cause:

i borrowed the x.png image from ‘basic’ example and used in it ‘contact form’ example. Everything works as expected when I click x.png image except the x.png image fades out about .5 second after the form - the delay is noticeable. Obviously I’d like them both to fade out simultaneously.

Can you point me in a direction to find the cause. Thanks, great plugin.
Author Comment
Eric Martin
February 4th, 2008 at 10:01 am
@senthil - I believe that you are referring to the fact that the dialog is fixed. If you want it to scroll out of sight, you’ll have to change the CSS position to absolute.

@Adrian - 1) the modal dialog is just another element on the screen, so tabbing to a different element is still valid. Like you mentioned, you’d have to specifically block tabs or whatever your need may be.
2) If you want the dialog to be draggable, I suppose you could check out the jQuery UI Draggables…although I have not tested its compatibility with SimpleModal.

@Lee - I suppose you could change the close function to look something like:
```
close: function (dialog) {
	dialog.data.find('.modalCloseX').fadeOut(200, function () {
		dialog.data.fadeOut(200, function () {
			dialog.container.fadeOut(200, function () {
				dialog.overlay.fadeOut(200, function () {
					$.modal.close();
				});
			});
		});
	});
},
```
Antony Kennedy
February 6th, 2008 at 10:32 am
I’ve got this working wonderfully now, but as Adrian said - the user can still tab to other elements, stopping this from being an actual “modal” dialogue box. If I block the tab key entirely, it stops the user from using the fields in the dialogue box itself. In a perfect world, I could pass a parameter to make all elements outside of the modal dialogue box untabbable. Any ideas?
Author Comment
Eric Martin
February 7th, 2008 at 8:58 am
@Antony - I found some ideas regarding this concept…basically, the suggestion was to watch for focus on a body element and ‘re-direct’ the focus back to the modal dialog. It’s something that I’ll put on the to-do list.
Richard
February 7th, 2008 at 9:59 am
Hey eric, its me again. You helped me in the past make links clicable for the contactor. now i seem to have a problem. it use to work great, but the version i had for some reason caused problems in IE 6. like when the contactor would load, it would appear at the bottom left and be barely visible and the overlay wouldnt cover the page.
i just downloaded your newest version. but when i changed the code in the js file to make a link with class smcontact load the contactor, it dosnt load it any more. i was wondering if theres more to it now thats its a newer version.
thanks.
sauravh
February 12th, 2008 at 6:06 am
nice prototype i like it. its good
sauravh
February 12th, 2008 at 6:06 am
good work
Susie Rockford
February 12th, 2008 at 7:28 pm
Eric,

Great plug-in! Well thought out, easily integrated, and no showstopper bugs.

Having trouble viewing a SWF video in simpleModal in Firefox. Amazingly, IE6 works fine. I noticed above that you had a demo working. Can you post that code or have any ideas what I may be doing wrong?
deepak
February 13th, 2008 at 6:42 am
Hi Eric.

Perhaps I’m missing something obvious.. what I want to do is to make the modal dialog go away just by clicking anywhere else outside the dialog. Is there some way to modify SimpleModal to get that functionality?

Thanks.
Author Comment
Eric Martin
February 13th, 2008 at 1:11 pm
@Susie - I can’t find the code anymore, but basically, I just took one of the YouTube object/embed statements, and put it in a div that was hidden. Then I used that div when I called the modal dialog.

What is the problem you are having?

@deepak - You could modify the script, or you could just add it to an onShow callback:
```
$.modal(data, {onShow: function (dialog) {
      dialog.overlay.one('click', function () {
         $.modal.close();
      });
   }
});
```
Richard
February 13th, 2008 at 2:09 pm
well if you need to see whats happening, you have to have IE 6. but on my main page i have alot of tables, and your modal loads under the tables (bottom of page) in IE 6.
is there a way to fix that?
jeff
February 13th, 2008 at 9:23 pm
GREAT Code ! GREAT Code !

on the demo you are usinf a buttom , how can I just make it a link ? ( i’m new to this )

tks…
jeff
deepak
February 14th, 2008 at 8:27 am
@Eric: That worked! Thanks!

@jeff: Something like this should work..
<a href="#" onClick="javascript:$('#modaldiv').modal()">Open</a>

Author Comment

Eric Martin
February 14th, 2008 at 10:30 am

@jeff - Something like:
HTML:

<a href="#" id="testLink">Test</a>

JavaScript:

$('#testLink').click(function (e) {
	e.preventDefault();
	$('#basicModalContent').modal();
});

Feed
February 14th, 2008 at 11:21 am
Awesome plugin, Eric! I have some suggestions that may help you improve it:

- Add support for ESC key to close the dialog
- Make the dialog box “auto-center” instead of doing it via CSS… Dimensions plugin is very good at helping with that.
- Add support for “width” and “height” as optional attributes instead of doing it via CSS
- Right now the content of the dialog box can’t be too big because it won’t fit the dialog. My suggestion would be to make it overflow inside the dialog box. Doing it through CSS messes the Close Button because it is inside the dialog content.

Thanks for sharing and keep up the good work.
Feed
February 14th, 2008 at 11:48 am
Oh, yeah… one more suggestion:

Right now when using a jQuery DOM attached element ($.modal($(’#modalContentTest’));) the element is actually removed from the DOM and pasted into the dialog.

What I suggest is that you add an optional parameter called “keepSource:boolean” or something similar that keeps the original DOM element in its original place.

Also, when the user closed the dialog the DOM element is pasted back into the HTML, but not in the same place it was before, making it unusable in most real world cases.
Stuart
February 14th, 2008 at 3:16 pm
Eric, Great plugin! Of course I’m having the same problems with IE that I always have. IE never seems to play along. I’m trying to use a simple modal like so:
$("#form").submit(function() { $('Processing....Please Wait.').modal(); return true; });
Works great in FF but IE6 gets the overlay size wrong. The overlay doesn’t fill the screen. There’s a little strip on the right and any screen real estate below the last html element is not overlaid. I’m using HTML 4.01 transitional doctype and I don’t have any css directly attributed to the html or body elements. I don’t want to have to resort to Adrian’s solution because it shouldn’t be necessary. Your tests and demos work correctly for me in the same IE6 browser that I’m currently cussing.

Can you point me to some possible causes? I’ve looked at the IEfix function and it uses height and width of the document body and not the viewport so is this the expected behavior for a document that is shorter than the viewport’s height?

Thanks!

jeff
February 14th, 2008 at 4:05 pm

Hi eric

i have tried :


$('#testLink').click(function (e) {
	e.preventDefault();
	$('#basicModalContent').modal();
});

<a href="#" rel="nofollow">Test</a>

but when i click on it nothing happpens.
thanks

Feed
February 15th, 2008 at 6:19 am
Oh, about my second comment from yesterday, my bad… just use the clone() function and the jQuery DOM element, well, is cloned… lol

$.modal($(’#modalContentTest’).clone());
Author Comment
Eric Martin
February 15th, 2008 at 7:07 am
@Stuart - try adding the following CSS:
```
body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}
```
@jeff - you need to add the id attribute to the link:
```
<a href="#" id="testLink">Test</a>
```
jeff
February 15th, 2008 at 11:31 am
Hi Eric;

here is what i have for the link , but when you click on in , nothing happens:

<script type='text/javascript'>
$('#testLink').click(function (e) {
e.preventDefault();
$('#basicModalContent').modal();
});
</script>
<a href="#" id="testLink">Test</a>
Author Comment
Eric Martin
February 16th, 2008 at 8:37 am
@jeff - do you have something in your page with an id of basicModalContent?

@Feed - Thanks for the comments and suggestions. I’m working on a new version and plan to add the ESC to close feature and am also making it so you can pass all the styling options through JavaScript, eliminating the need for external style sheets (if desired).

I’m hesitant to add auto-centering because I’ve tried to avoid taking control away from the end-user. I could make it an option.

I’m working on the overflow fix…I agree that it should be there.

I’m a little confused about your second post regarding the DOM elements. Currently, if the data object came from the DOM, SimpleModal will keep track of its parent and when the dialog closes, it will append the element back to its parent.

As far as it going back in the exact same place, I’m not sure why it would matter. Unless you have a different requirement, most of the data used in a modal dialog (that comes from the DOM) will be hidden until it is used by SimpleModal.

Lastly, there is the persist option, which if true, will not clone the data. That means that you can modify the element and SimpleModal will put it back in the DOM with the changes intact.
Nazgulled
February 16th, 2008 at 8:33 pm
Hi,
I took your suggestion in the jQuery Google Groups and I’ve been testing your plugin for the past couple of hours but I’m having a few difficulties accomplishing some stuff…

1) Through out my code I call $(’#EXAMPLE-ID’).modal({options}) numerous times and I have a bunch of options repeating through every call. This kinda sucks… Is there a way I could configure the default options values and then simply call $(’#EXAMPLE-ID).modal() and it will simply show the modal dialog with the options configured before? Also, in a way that if I want to override some of those default option values I’ve set, it would be nice…

2) I don’t use a close ‘X’ button on my modal dialogs, I prefer to close the dialog manually in a different way– by clicking anywhere inside the modal dialog and for that, I bind the click() event to the respective ID. But for this to work, I need to close the modal dialog manually. I used to do the following using jqModal:
$('div#popup-content').click(function() { $(this).jqmHide(); });
How can I accomplish the same thing using your plugin?

3) Last but not least… I’ve read the documentation here on this page about the onOpen and onClose callbacks but I’m not able to do want I want. Basically I want the whole modal dialog (overlay and container) to fade in (onOpen) and fade out (onClose) at the same time, like they were just one element with, for instance, 1000ms for both animations. How can I do that?
jeff
February 16th, 2008 at 11:09 pm
Hi Eric;

the only place i have basicModalContent in the below :

<script type='text/javascript'>
$('#testLink').click(function (e) {
e.preventDefault();
$('#basicModalContent').modal();
});
</script>
<a href="#" id="testLink">Test</a>

thanks…..
Author Comment
Eric Martin
February 17th, 2008 at 8:56 am
@Nazgulled - I’m glad you gave SimpleModal a look…I know there are a lot of other options out there!

1) If you want to globally change the defaults, you can do so with something like:
```
$.modal.defaults.close = false;
```
You can do that for each property that you want to change. Then if you want to override one of those new values for a specific instance, just pass it in the options in the modal call.

2) For SimpleModal, you can do:
```
$('div#popup-content').click(function() {
    $.modal.close();
});
```
3) Try something like the following:
```
$('#modalContent').modal({
	onOpen: function (dialog) {
		dialog.overlay.fadeIn(1000);
		dialog.container.fadeIn(1000);
		dialog.data.fadeIn(1000);
	},
	onClose: function (dialog) {
		dialog.data.fadeOut(1000);
		dialog.container.fadeOut(1000);
		dialog.overlay.fadeOut(1000);
	}
});
```
Nazgulled
February 17th, 2008 at 10:41 am
Thank you Eric… When I posted that it was 4AM here and I was very sleepy, I managed to most of the things you just replied before seeing your answer. It took a while but I did it…

Few things though:
1) I did something more like this:
$.modal.defaults = $.extend({}, $.modal.defaults, { overlay: 60, overlayId: 'popup-overlay', containerId: 'popup-wrapper', close: false, }
Which, I think, looks better, but it’s a matter of taste.

2) I don’t if it’s just me or what but I don’t think it’s very consistent this way… Perhaps you could implement the show and close methods like in jqModal? I’m saying this because I think it makes more sense to do $(’ID’).modal(options).show() vs $(’ID’).modal(options) and $(’ID’).modal().close() vs $.modal.close(). Just a suggestion… I think it’s better and more consistent.

And this way, we could easily have more than 2 “modal” dialogs at a time. But that’s up to you…

Thanks for the great plugin!
Author Comment
Eric Martin
February 17th, 2008 at 1:04 pm
@Nazgulled -

1) That works too… TIMTOWTDI

2) In the new version I’m working on, you’ll be able to call close on the object directly. I don’t know that I want to add a show()…it was something that I didn’t like that about jqModal. I guess it’s a matter of preference, but I’ll consider your input as I re-write the code.

Also, the new version will support multiple modal dialogs.
Nazgulled
February 17th, 2008 at 3:24 pm
Thanks for all your effort. I’ve just subscribed to your feed to keep me update
miCRoSCoPiC^eaRthLinG
February 18th, 2008 at 11:35 am
Hey Eric,
First of all - a terrific piece of art your got there I say “art”, coz I firmly believe in what the folks @ WordPress say i.e. “Code is Poetry”.

Anyway, coming back to the real topic, I was trying the fade-in/out effect of SimpleModal and tried to follow the code you’ve outlined in the reply to Nazgulled -
onOpen: function (dialog) { dialog.overlay.fadeIn(1000); dialog.container.fadeIn(1000); dialog.data.fadeIn(1000); }, onClose: function (dialog) { dialog.data.fadeOut(1000); dialog.container.fadeOut(1000); dialog.overlay.fadeOut(1000); }

What happens in my case is that the very first time I click on the popup link, the modal dialog fades in.. upon closing it, it fades out just fine too. But then on, it simply refuses to show anymore. Not just that, any other modal dialogs (I got 3 different ones on a page) don’t respond to clicks either.

If I take away the codeblock shown above, the dialogs appear/close at will without any hiccups.

This occurs both in IE and Firefox. Has anyone come across this problem earlier? If someone has face + solved this problem, kindly point me to the right direction…

Thanks,
m^e

Author Comment

Eric Martin
February 18th, 2008 at 1:05 pm

@miCRoSCoPiC^eaRthLinG - ahh yes…there is a problem with the onClose callback. It should be:

onClose: function (dialog) {
    dialog.data.fadeOut(1000);
    dialog.container.fadeOut(1000);
    dialog.overlay.fadeOut(1000, function () {
        $.modal.close(); // closes the dialog after all events
    });
}

Nazgulled
February 18th, 2008 at 4:21 pm
Me again, I’m having 2 little issues that are getting on my nerves :S

1) I am not being able to manually close the dialog with a fade effect. I mean, I’m binding the click event of dialog itself to close it with $.modal.close() and I have this code:

$.modal.defaults = $.extend({}, $.modal.defaults, { overlay: 60, overlayId: 'popup-overlay', containerId: 'popup-wrapper', close: false, onOpen: function(popup) { popup.overlay.fadeIn(100) popup.container.fadeIn(250, function() { if ($.browser.msie) this.style.removeAttribute('filter'); // Fixes IE7 ClearType bug }); popup.data.fadeIn(250, function() { if ($.browser.msie) this.style.removeAttribute('filter'); // Fixes IE7 ClearType bug }); }/*, onClose: function(popup) { popup.data.fadeOut(250); popup.container.fadeOut(250, function() { popup.overlay.fadeOut(100); $.modal.close(); }); }*/ });

The onClose code is commented because it’s not working. If I uncomment the code and click on the dialog to close it, it closes fine but does not fade out. What’s wrong?

2) I don’t know why, but I have some stupid bug on IE7 display the popup, it works fine on FireFox. Here’s my code:

{Admin:WebsiteTitle} {PopupNotice:Message}

div#popup-wrapper { width: 360px; left: 50%; top: 80px; margin-left: -180px; }
div#popup-block { display: none; background-color: #ffffff; border: 2px solid #103b74; cursor: pointer; } div#popup-overlay { background-color: #000000; cursor: wait; } img#popup-icon { margin: 5px 0 0 5px; } div#popup-title { font-weight: bold; font-size: 14px; margin: 12px 10px 0 0; color: #5c5c5c; float: right; }
div#popup-notice { background-color: #e4f0ff; margin: 5px 5px 5px 5px; padding: 5px; color: #103b74; }

And what’s happening on IE7:
http://img90.imageshack.us/my.php?image=simplemodalau4.jpg
http://img90.imageshack.us/img90/3664/simplemodalau4.jpg
(in case one link fails, the other should work)

Hope these 2 problems are easily fixable…
Nazgulled
February 18th, 2008 at 9:07 pm
Dammit, the HTML code wasn’t posted correctly. How can I post code like you Eric?
miCRoSCoPiC^eaRthLinG
February 18th, 2008 at 11:37 pm
Thanks Eric - that $.modal.close() did the trick. However, the dialog refuses to fade out.. instead it just goes off as it would normally. Only the fade-in part is working.

A small question for Nazgulled: What exactly does this code do –>
if ($.browser.msie) this.style.removeAttribute('filter'); // Fixes IE7 ClearType bug

I understand it fixes some cleartype bug.. but what exactly is this cleartype bug and how is it fixing it…

Thanks,
m^e
miCRoSCoPiC^eaRthLinG
February 18th, 2008 at 11:56 pm
One more question for you guys.. Any fade in/out effect using jQuery looks pretty horrible in Internet Explorer, horrible as in, while the fading action is taking place all the text and PNG (transparent) graphics become grainy and kind of smudged. They get back to their original state once the effect is over. This isn’t a problem in Firefox or Opera whatsoever..

Does this have to do anything with the cleartype bug you were talking about? If so, I’m afraid those two lines of code didn’t help much. Any ideas why?

Thanks,
m^e
Nazgulled
February 19th, 2008 at 5:53 am
@miCRoSCoPiC^eaRthLinG
Yes, the fuzzy text is the “bug fix” on my code. When using opacity for elements that have text in IE6/IE7, this problems occurs.

IE6) To fix the bug on this browser, you need o add a background-color to the text element that gets fuzzy and it won’t happen anymore.

IE7) There is no way to fix the fuzziness during the animation, the text will always look rough. You can, however, when the animation ends, put the smooth text back and for that, you use the code that I posted above.

You can do a simply workaround to this problem (for both browsers) if the background where the dialog appears is a fixed color or a fixed image that won’t change. I mean, instead of fadding in the element (for instance), you had another element on top of that with the color of the background and fade out that element instead. See what I mean?
Stuart
February 19th, 2008 at 12:46 pm
Thanks Eric. That css code works a treat.
future maman
February 19th, 2008 at 2:35 pm
Very good job, i just have a problem on ie 7, the modal box is hiding by a swf banner.
Thank you for this great work
miCRoSCoPiC^eaRthLinG
February 19th, 2008 at 7:20 pm
@future maman: Try adding a wmode="transparent" parameter to your swf banner. I’ve faced a similar problem while using another modal dialog (ModalBox - based on Prototype + Scriptaculous). The banners on the page below would sort of “burn” through the dialog box and show-up inside it along with the content. The wmode parameter took care of it.

@Nazgulled: Thanks a lot for that nice explanation Will give your recommendations a shot and report back..

Cheers,
m^e

Author Comment

Eric Martin
February 20th, 2008 at 11:25 am

I found a “fix” for IE7 in quirksmode. In jquery.simplemodal.js, just under create: function () {, add the following:
var pos = ($.browser.msie && /^7.*/.test($.browser.version) && !$.boxModel) ? 'absolute' : 'fixed';

Then in the create function, replace the two instances of 'fixed' with pos.

So, the entire create function should look like:

create: function () {
   var pos = ($.browser.msie && /^7.*/.test($.browser.version) && !$.boxModel) ? 'absolute' : 'fixed';
   // create the overlay
   this.dialog.overlay = $('<div>')
      .attr('id', this.opts.overlayId)
      .addClass('modalOverlay')
      .css($.extend(this.opts.overlayCss, {
         opacity: this.opts.overlay / 100,
         height: '100%',
         width: '100%',
         position: pos,
         left: 0,
         top: 0,
         zIndex: 3000
      }))
      .hide()
      .appendTo('body');

   // create the container
   this.dialog.container = $('<div>')
      .attr('id', this.opts.containerId)
      .addClass('modalContainer')
      .css($.extend(this.opts.containerCss, {
         position: pos,
         zIndex: 3100
      }))
      .append(this.opts.close
         ? '<a class="modalCloseImg '
              + this.opts.closeClass
              + '" title="'
              + this.opts.closeTitle + '"></a>'
         : '')
      .hide()
      .appendTo('body');

   // fix issues with IE and create an iframe
   if ($.browser.msie && ($.browser.version < 7)) {
      this.fixIE();
   }

   // hide the data and add it to the container
   this.dialog.container.append(this.dialog.data.hide());
},

Author Comment

Eric Martin
February 20th, 2008 at 11:41 am

@Nazgulled - right above the reply textarea is the info on how to post code.

As for your onClose function, you have to nest the fadeOut calls and the close…try:

onClose: function(popup) {
   popup.data.fadeOut(250, function () {
      popup.container.fadeOut(250, function() {
         popup.overlay.fadeOut(100, function () {
            $.modal.close();
         });
      });
   });
}

Craig Neuwirt
February 20th, 2008 at 4:17 pm
I have applied the fix for IE7 quirksmode and observed that the overlay is properly positioned, but the container remains at the end of the page (or wherever you defined it). The fix sets the position css to absolute, but it doesn’t see any coordinates so I am wondering how it is supposed to get centered.

Thanks,
craig
Nazgulled
February 20th, 2008 at 6:38 pm
Eric, about the code posting, yes, I see the info how to post code and that’s what I do, but it looks different from yours. Yours have a border and the background color is darker, the way I do it (with the (pre)(code)CODE(/code)(/pre) but with ) only uses a different font for the code.

Anyway, to my problems, I got confused…

1) I used the code you post to have the popup fade out when closing but it isn’t working. The popup just closes, it doesn’t fade.

2) About the overlay problem… I don’t if that create function replacement was for me or not, but I tried it and it didn’t work.

But just so I don’t get more confused, continue the overlay issue on the jQuery groups which you have already replied and I’m going to reply to you there in just a moment. And please help me with the close fadeout here.
Nazgulled
February 20th, 2008 at 7:28 pm
I found out the problem about my fadeOut using $.modal.close(); but I don’t know how to fix it…

You see, I’m using this:

// Allows the popup notification to be hidden when clicked $('div#popup-block').click(function() { $.modal.close(); });

As I’ve told you before, so that the popup is closed by clicking on it self.

Looking through the code of simplemodal I realized that when I call $.modal.close() the $.modal.impl.close(true); has the external parameter set to true and that will ignore the onClose callback which means the fadeOut effect will be ignore.
Nazgulled
February 20th, 2008 at 7:52 pm
Sorry about all this posts…

I just found a way to fix it which I think it’s not a fix, but the correct way to do it. First, my onClose callback was ok, I mean, the following works:

onClose: function(popup) { popup.data.fadeOut(250); popup.container.fadeOut(250, function() { popup.overlay.fadeOut(100); $.modal.close(); }); }

However, I cannot manually bind the $.modal.close() to the click event of some HTML element. Instead, I just set the class of the element (in my case, the popup-block) to “modalClose”. Actually, I did this $.modal.defaults.closeClass = ‘popup-close’;, and set the class of the element accordingly. But either way, it works, because this way, the onClose callback will be executed cause this is an internal call to the modal.close.

—————————————————–

One thing about something I noticed… First, are you going to release a new version soon or you are not thinking about it for now? I have a suggestion, cause, I’ve commented a few lines on the source code that I think are not doing anything there, they are:

Line 181: this.dialog.data = data;//.addClass(’modalData’);
Line 205: //.addClass(’modalOverlay’)
Line 221: //.addClass(’modalContainer’)

I mean, we already have IDs set to the modal elements, why do we need this classes? They are not being used at all and I don’t like to have code on my applications that I don’t use. My suggestion is to get rid of this, but I believe you have some use for them so here’s a more detailed suggestion:

Allow us to configure which IDs/classes do we want to use in your modal dialog HTML elements (overlay, container and data) and their names. First, you only allow to change the name of the IDs and not the classes, you should allow them both to be configured. Second, you should also allow to use the ID/class or not for that specific element.

Just a suggestion, I don’t know what your up to for the next version.

Anyway, do you think my solution for the onClose thing is good?
Now I’m just left with the problem of the overlay in IE6/7…
setiawanthea
February 20th, 2008 at 7:57 pm
Hi Eric…
I’m a beginner in PHP and javascript but I wan to create my admin site with Your wonderful JS. So can you please teach me step by step how to implement this wonderful JS, suppose that. I have a View.php which look like this :

—————————–
| ACTION | ID1 | NAME|
—————————–
|edit | delete | 1 | ME |
—————————–
|edit | delete | 2 | YOU |
—————————–
|edit | delete | 3 | US |
—————————–

and the process should be like:
when I click edit link it will show a simple modal form with data in it.
after that when I click save button in the form it will save my data in that form and close that form so it shall return to my view list.

forgive my english also and Thanks Before yak..
salam, setiawanthea
Author Comment
Eric Martin
February 20th, 2008 at 10:53 pm
@Craig - there was an error in the code I posted, can you try again? The positioning comes from the CSS.

@Nazgulled - yes, I’m working on a new version, but no it will probably not be ready “soon”. I had something close, but I’m re-thinking some aspects of it.

As for the addClass comment…classes and ID’s serve different purposes. I add the class to allow common styling across multiple dialogs (if desired). If you don’t need/want to use that “feature”, that’s fine…but it doesn’t mean that the code not doing anything or not needed. I could make the class an option, but I don’t know that it is really necessary.

Your onClose “solution” is what I do in my projects. And I don’t know what to tell you about the IE issue. The CSS I provided should fix it in IE6 and I don’t see the issue in IE7 (you say you do an have found a fix…so everything should be good now, right?)

@setiawanthea - that’s a pretty loaded question Basically, you’d display the dialog and use the onShow callback to bind the save button to perhaps an Ajax call. If that is successful, close the dialog (and perhaps update the original page) or if there is an error, display the message.
Nazgulled
February 21st, 2008 at 3:51 am
1) About the classes thing, I do believe it’s necessary to make it an option because I think it’s pointless to have code you don’t use. I’m saying that it won’t ever be used by me or someone, but by default, it’s being created but not used. It should be made an option and people who wants it, use it, and the others don’t…
What if for some reason I have different code that uses the class names that are hard coded in your plugin? That will create strange behavior… I think that making an option to allow us to give names to the IDs/Classes and to select if we want to use those or not is the best thing. I mean, SimpleModal will still work just as good and you provide choice to the users to configure it the way they want.

2) About the close solution, I’m still left with a little issue that I just noticed. I mean, I want the popup to be closed when clicked, done that with the popup-close class. However, there’s ONE situation where I still need to manually call $.modal.close(). You see, I use a modal dialog in every page, while the page is loading, I show the modal dialog in the $(document).ready() and I close it in $(window).load() which will be called when the page finishes loading.

Basically I have this:

$(document).ready(function() { $('div#popup-block').modal(); });
$(window).load(function() { $.modal.close(); });

And like I said before, calling $.modal.close() like this, ignores the onClose callback and there’s not fadeOut effect. Any ideas on how to work around the issue?

3) As for the IE problem. Yes, it’s fixed in IE7. Like I said on google groups, the problem is on the browser detection of jQuery that detects IE7 on Vista as IE6 and that will make SimpleModal call the fixIE() method, which will break the overlay on IE on Vista. But the problem persists on IE6… Maybe I’m missing something. Could you provide the most simple example– and by simple I mean, with the less lines of code possible, only with what’s needed– to show the modal dialog in a way that is working on IE6? Maybe I’m missing something that we are both failing to see on my example…
Author Comment
Eric Martin
February 21st, 2008 at 1:22 pm
@Nazgulled -
2) I guess if you wanted to, you could change it so $.modal.close() accepted a parameter (true|false) and that way you could have it call the callback if you wanted it to. Or you could create a new function that did the same thing.

3) The tests and demos all work in IE6, so I’d look there. What version of IE7/Vista are you running that is reporting IE7 as IE6?
Nazgulled
February 21st, 2008 at 2:11 pm
2) I remember having tried to do something like that but for some reason, the close behavior was weird… I might try it again. But, why is there such an option? I mean, the “external” thing in that method, what it’s purpose?

3) I’ve already fixed the problem on IE6. You were right about the body styles you told me in the google groups. The first time I tried them, I must have done something wrong.

But now I’m having a problem with Opera, regarding the same thing, the overlay. 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.

The problem is, when you click to show the modal dialog, it shows
fine. But after closing it, you will see something odd… Look at the
screenshot, it shows what’s happening after closing the dialog:
http://img408.imageshack.us/my.php?image=operavu1.jpg
eugene
February 21st, 2008 at 5:22 pm
Hi Eric~
Are you familiar with asp? If yes ,is that possible to configure configure.js
to respond such value as below?

<a href=”memberstatus.asp?memberstatus.asp?course=”>

Because previously my memberstatus.asp is someting like yes/no page; If user choose yes it will redirect to member register page if not a member it will redirect to member register page(but without member id/expired date field) Are you able to help?
If can i can email you the coding o gimme some hint over here.

Thanks in advance.
eugene
Benkibirugaali
February 22nd, 2008 at 3:56 am
Nice plug in Eric.
It seems i have problem in IE 6,when page is scrolled down using the scroll bar the dialog box(modal) also scrolls with it.It doesn’t happen in firefox.I also looked at your Demo modals, it too have same problem with IE 6.

Thanks in advance
oscarml
February 22nd, 2008 at 6:07 am
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?
Nazgulled
February 23rd, 2008 at 5:11 pm
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…
Author Comment
Eric Martin
February 24th, 2008 at 8:44 am
@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.
Nazgulled
February 24th, 2008 at 9:05 am
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.
Nazgulled
February 24th, 2008 at 11:31 am
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.
oscarml
February 25th, 2008 at 1:39 am
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?
oscarml
February 25th, 2008 at 1:41 am
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?
Michael Staples
February 25th, 2008 at 4:31 am
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.
Author Comment
Eric Martin
February 25th, 2008 at 9:26 pm
@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.
Nazgulled
February 26th, 2008 at 3:07 am
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.
Michael Staples
February 26th, 2008 at 5:04 am
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.
oscarml
February 26th, 2008 at 5:49 am
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?
Nazgulled
February 26th, 2008 at 5:52 am
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.
oscarml
February 26th, 2008 at 5:52 am
sorry guys, to many hours coding. This works:

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

thx for attending me!
henrik
February 26th, 2008 at 7:36 am
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?
Nazgulled
February 26th, 2008 at 7:40 am
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.
henrik
February 26th, 2008 at 7:52 am
thank you.
Author Comment
Eric Martin
February 26th, 2008 at 9:23 am
@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.
oscarml
February 26th, 2008 at 11:45 am
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
oscarml
February 26th, 2008 at 12:02 pm
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!
Author Comment
Eric Martin
February 26th, 2008 at 12:07 pm
@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
Nazgulled
February 26th, 2008 at 1:49 pm
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…
varmısın yokmusun
February 27th, 2008 at 6:27 pm
Hi Eric;

the only place i have basicModalContent in the below
```
$('#testLink').click(function (e) {
   e.preventDefault();
   $('#basicModalContent').modal();
});

<a href="#">Test</a>
```
thank you…..
Lee
February 27th, 2008 at 6:59 pm
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.
Richard
February 27th, 2008 at 8:57 pm
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!
Author Comment
Eric Martin
February 29th, 2008 at 7:12 am
@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</>
```
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.
Richard
February 29th, 2008 at 2:11 pm
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.
Gabriel Sobrinho
February 29th, 2008 at 3:19 pm
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
Gabriel Sobrinho
February 29th, 2008 at 3:22 pm
I talked “small” in “small size” ok?

Tks bro
Fabiana
February 29th, 2008 at 3:42 pm
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?
Ronald
March 1st, 2008 at 2:25 am
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?
Author Comment
Eric Martin
March 1st, 2008 at 9:23 am
@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.
Richard
March 1st, 2008 at 3:41 pm
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
tom
March 2nd, 2008 at 12:35 am
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
tom
March 2nd, 2008 at 12:39 am
ups mispelled:

scrollable code works without SIMPLEMODAL before .modal call;

t
oscarml
March 2nd, 2008 at 4:11 am
@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?
Edemilson Lima
March 2nd, 2008 at 5:35 pm
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?
oscarml
March 3rd, 2008 at 5:29 am
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
nicmare
March 3rd, 2008 at 6:54 am
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…
nicmare
March 3rd, 2008 at 6:57 am
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?
nicmare
March 3rd, 2008 at 6:58 am
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 =)
Gabriel Sobrinho
March 3rd, 2008 at 12:12 pm
Hi Eric,

Perfect… Tks for help me! =)
Author Comment
Eric Martin
March 3rd, 2008 at 12:36 pm
@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.
Gabriel Sobrinho
March 3rd, 2008 at 3:19 pm
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
Author Comment
Eric Martin
March 3rd, 2008 at 3:37 pm
@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();
    });
}
```
oscarml
March 4th, 2008 at 8:51 am
Eric, ur suggestion doesn´t work. Anyway, don’t worry, is working fine.

Thx again for such a good plugin.
Gabriel Sobrinho
March 5th, 2008 at 2:43 pm
@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
Author Comment
Eric Martin
March 6th, 2008 at 10:05 am
@Gabriel - see if this post helps…
nicmare
March 7th, 2008 at 12:09 pm
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 :(.
nicmare
March 7th, 2008 at 12:20 pm
damn it, never mind eric! is was (of course) a mistake of mine. d’oh…
Gabriel Sobrinho
March 7th, 2008 at 1:31 pm
@Eric:

body { color: #333; font: 8pt Arial; padding: 10px; width: 100%; height: 100%; margin: 0; }

The #modalOverlay use “position: fixed;” and this dont work in IE6. I trying to use expression, used in #modalContainer, but dont have success.

I used the page with lot of content, and this generate scroolbar. If you down the scroolbar, the overlay isnt fixed (the bug of “position: fixed;”).

Check this, and you see

I trying to solve this problem, if i do, post this here…

Tks
Author Comment
Eric Martin
March 7th, 2008 at 3:01 pm
@Gabriel - the code in SimpleModal fixes the IE6 issues. The tests page has scrollbars and works fine in IE6, so I’m not sure what is causing your issue.
Ken Snyder
March 8th, 2008 at 11:39 pm
This is exactly what I needed. Strong work!
Paul Armitage
March 10th, 2008 at 9:33 am
I’m trying to display a jQuery accordion (http://http://bassistance.de/jquery-plugins/jquery-plugin-accordion/) inside simplemodal.

It works fine on a mac in Safari or Firefox. But it won’t work on WinXP in either FireFox or IE7.

It looks like the accordion script doesn’t get run. I tried using onShow and onOpen to initialise the accordion, but no joy.

Has anyone managed this?

Author Comment

Eric Martin
March 10th, 2008 at 10:05 pm

@Paul - I was able to get it working using the onShow callback. I took the HTML code (#list1a) from the accordion demo page, and have the following JS:

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.dimensions.js'></script>
<script type='text/javascript' src='jquery.accordion.js'></script>
<script type='text/javascript' src='jquery.simplemodal.js'></script>

<!-- from accordion demo page -->
<link href='demo.css' type='text/css' rel='stylesheet'></link>

<!-- simplemodal style -->
<link href='modal.css' type='text/css' rel='stylesheet'></link>

<script type='text/javascript'>
$(document).ready(function () {
   $("#test1").click(function () {
      $("#list1a").modal({onShow: function (dialog) {
         $('#list1a', dialog.content).accordion();
      }});
   });

});
</script>

vitto
March 13th, 2008 at 4:09 am
hi eric
i got a little problem using sM in ie6.
I’m using it together with cycle Plugin (yes i already asked something about this in the jquery discussion group:).
problem is: i’m using this function to center images:

$('#pic2 img').each(function(){ $(this).css({top: '0px', left: '0px' }); var t = ($(this).parent().height() - $(this).height()) / 2; var l = ($(this).parent().width() - $(this).width()) / 2; $(this).css({top: t, left: l }); });

and in ie6 the image appear much lower than they should. This is the page i’m working on:

http://www.tasker.it/news_fiere/news_singola_gallery.php?id=29

it’s like the container element in sM gets too much higher. any idea?
Helio
March 13th, 2008 at 12:14 pm
How to set closeimg css values in the options like containerCss?
Author Comment
Eric Martin
March 14th, 2008 at 8:06 am
@vitto - as I mentioned in the jQuery group, I’m not so sure that it has to do with a plugin, but with the CSS.

@Helio - there isn’t a way to directly set it through the options. You’ll have to use external CSS or modify the script.
Scott Campbell
March 16th, 2008 at 5:18 am
Hi, i have been up all night trying to do this, but i just cant. is it possible to use the contact (in the demos section) style and animation, but instead of a contact form, an iframe or something?

Thanks Scott Campbell.
Author Comment
Eric Martin
March 17th, 2008 at 3:02 pm
@Scott - you should be able to. What have you tried? What problems are you having?
Richard
March 17th, 2008 at 9:14 pm
I upgraded to you newer modal, and as always im impressed.
But what security feature did you add? i though it would be the tabbing issue but its not.
Author Comment
Eric Martin
March 18th, 2008 at 8:28 am
@Richard - the only thing I’ve upgraded was the