v1.1.1
Deprecated: please see the current version.
Summary | Demos | Tests | Download | Support | Usage | Styling | Options | Callbacks | Other Notes
Archives: SimpleModal v1.0.1
Archives: SimpleModal v1.0.1
Summary
SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.
The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.
Demos
Tests
Download
Support
Usage
As a jQuery chained function, where data is a jQuery object:
data.modal([options]);Examples:
$('<div>my data</div>').modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});As a stand-alone jQuery function, where data is a jQuery object, a DOM element, or a plain string (which can contain HTML):
$.modal(data, [options]);Examples:
$.modal('<div>my data</div>', {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});Styling
- New in 1.1, there are two options that enable you to pass in CSS attributes for the modal overlay and container. They are
overlayCssandcontainerCssand 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 dialogsmodalContainer: used to style the container div – helpful for applying common styles to different modal dialogsmodalData: (Added in v1.1.1) used to style the data element – helpful for applying common styles to different modal dialogsmodalCloseImg: 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.modalCloseImgand 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 = opaqueoverlayId: (‘modalOverlay’) The DOM element id for the overlay divoverlayCss: ({}) The CSS styling for the overlay divcontainerId: (‘modalContainer’) The DOM element id for the container divcontainerCss: ({}) The CSS styling for the container divclose: (true) Show the default window close icon? Uses CSS classmodalCloseImgcloseTitle: (‘Close’) The title value of the default close link. Used ifclose == truecloseClass: (‘modalClose’) The CSS class used to bind to the close eventpersist: (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 stateonOpen: (null) The callback function called in place of SimpleModal’sopenfunctiononShow: (null) The callback function called after the modal dialog has openedonClose: (null) The callback function called in place of SimpleModal’sclosefunction
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
onClosecallback, seeonClosein the Callback section above.
Data CSS Display Property
- SimpleModal “hides” the data when it adds it to the modal dialog. If you use an
onOpencallback, the dialog.data display value will have been set tononeand 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
persistis true, SimpleModal will “re-insert” the original element, with changes intact. If you use anonClosecallback, see the onClose in the Callback section above. - SimpleModal always removes the overlay, container and iframe elements when closed. If you use an
onClosecallback, 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
@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:
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?
@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.
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.
nice prototype i like it. its good
good work
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?
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.
@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
onShowcallback: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?
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
@Eric: That worked! Thanks!
@jeff: Something like this should work..
<a href="#" onClick="javascript:$('#modaldiv').modal()">Open</a>@jeff – Something like:
HTML:
JavaScript:
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.
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.
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!
Hi eric
i have tried :
but when i click on it nothing happpens.
thanks
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());
@Stuart – try adding the following CSS:
@jeff – you need to add the id attribute to the link:
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>
@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.
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?
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…..
@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:
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:
3) Try something like the following:
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!
@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.
Thanks for all your effort. I’ve just subscribed to your feed to keep me update 😉
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 🙂
@miCRoSCoPiC^eaRthLinG – ahh yes…there is a problem with the onClose callback. It should be:
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:
https://img90.imageshack.us/my.php?image=simplemodalau4.jpg
https://img90.imageshack.us/img90/3664/simplemodalau4.jpg
(in case one link fails, the other should work)
Hope these 2 problems are easily fixable…
Dammit, the HTML code wasn’t posted correctly. How can I post code like you Eric?
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
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
@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?
Thanks Eric. That css code works a treat.
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
@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
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
createfunction, replace the two instances of'fixed'withpos.So, the entire
createfunction should look like:@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:
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
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.
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.
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…
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
@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.
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…
@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?
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:
https://img408.imageshack.us/my.php?image=operavu1.jpg
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
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