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
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!!!
@andres – Yes, you can. You can use all of the callbacks together, if you like.
Example:
Hi Eric.
Your plugin it’s excelent.
It’s possible some more demo for beginers
Thank you
David O.
@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.
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.
@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:
I am french…
Nice nice nice, congratulation
Thank you
Roger
Good work! Thanks!
I think it more useful to change
left:588px; in #modalContainer a.modalCloseImg
for
right:-15px;
I found memory leak problem in IE. This problem occur practically in all simular plugins. It’s no good.
@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.
any static function I can call to close modal window rather than click the close link within the window
@Logan – The following should work:
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
@Logan – good point π I’ll need to fix that. All you need to do is add the following in the close function:
So, you should end up with:
UPDATE: Fixed in the 1.1.1 release
cool as
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.
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?.
https://img236.imageshack.us/img236/1392/transvideodx9.gif
@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:
Since the data is inside the container, it will inherit the opacity value as well. This requires v1.1.
Hi Eric,
Excellent jQuery addition, thank you very much!
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.
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
@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…
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.
@kadir – I was testing with a YouTube video. I’ll try the other ones and get back to you.
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.
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){…}
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.
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.
@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:
You’ll need to update the IE CSS as well…
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!
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
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?
@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.
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.
Hi Eric,
Could you test it?
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.
@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'})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.
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
@Adrian – I just double checked the demo and it works correctly, so it must be something in your page. What
DOCTYPEare you using? Do you have any CSS applied tobodyorhtml?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!
BTW, the page is a JSP, sorry π
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
@Adrian – can you email me some sample code or send a link? It’s hard to troubleshoot without seeing something π
Hi Eric,
I also need ‘nested modals’ feature. I need it to update an entry form modal ‘records list’.
Thanks!
Todor
Eric, i made it! It worked ok using the methods Screen.getDocumentHeight, and Screen.getDocumentWidth from https://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!!
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?
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
Hi Eric… Is there a way to make a simplemodal window draggable??
Thanks!
Adrian
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.
@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
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?
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… π
@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
loadfunction doesn’t work that way. You could try something like:@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.
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.
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.
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?
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?
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.
@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:
@Michael – you could add something like:
Then use $myVar in the script as needed.
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.
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.
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?
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.
sorry guys, to many hours coding. This works:
var data = $.get('test_data.html', function(){
$.modal(data.responseText);
});
thx for attending me!
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?
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.
thank you.
@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:
2) Use that "id" parameter to add a hidden field in the contact form with the same values (data/contact.php):
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:
I don't advocate coding this way (using onclick, etc), but I just wanted to show you a working example based on your code.
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
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!
@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 π
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…
Hi Eric;
the only place i have basicModalContent in the below
thank youβ¦..
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.
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!
@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:
In the contact.js, replace what’s in
$(document).ready(function () {with: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.
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.
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
I talked “small” in “small size” ok?
Tks bro
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?
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?
@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:
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:Then you can call
$.modal.close(false);anywhere you like, as long as it’s not from inside youronClosecallback.@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.
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
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
ups mispelled:
scrollable code works without SIMPLEMODAL before .modal call;
t
@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?
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?
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
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…
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?
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 =)
Hi Eric,
Perfect… Tks for help me! =)
@Richard – glad it’s working!
@tom – I’ll take a look…
@oscarml – Try the following CSS:
@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.
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
@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):
Eric, ur suggestion doesnΒ΄t work. Anyway, don’t worry, is working fine.
Thx again for such a good plugin.
@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
@Gabriel – see if this post helps…
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 :(.
damn it, never mind eric! is was (of course) a mistake of mine. d’oh…
@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
@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.
This is exactly what I needed. Strong work!
I’m trying to display a jQuery accordion (https://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?
@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:
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:
https://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?
How to set closeimg css values in the options like containerCss?
@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.
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.
@Scott – you should be able to. What have you tried? What problems are you having?
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.
@Richard – the only thing I’ve upgraded was the WordPress plugin built on SimpleModal…not SimpleModal itself.
simplemodal Error on IE6
for example if you include your example “contact” into one table as this:
Contact Form
A contact form built on SimpleModal. Demonstrates the use of the onOpen, onShow and onClose callbacks, as well as the use of Ajax with SimpleModal.
To use: Open data/contact.php and modify the $to and $subject values. To enable/disable information about the user, configure the $extra array.
@Samuele – I’m not sure I understand your message. What is the error?
onOpen doesn’t work in safari 3.0.4 for win. even in your text example, it doesn’t fadeIn the overlay.
also clicking outside the modal, doesn’t close it.
the 2nd issue i solved by:
dialog.overlay.one("click", function (e) {
modalClose(dialog);
});
@george – thanks for pointing out the Safari issue. It’s a known issue with Safari, and there are a few different ways to “fix” it. I’ll release a minor update that will resolve the issue.
As for your second comment…it’s not a bug or issue…I didn’t want clicking outside the modal to close it. But as you posted, it is very simple to add that if you do π
Below is the page I'm doing as a test. When I click the link, instead of getting a modal, I just see the text "Sample Content Just A String."
What am I missing?
Thanks.
<html>
</style>
<head>
<script type="text/javascript" src="contact/js/jquery.js"></script>
<script type="text/javascript" src='contact/js/jquery.simplemodal.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function (e) {
e.preventDefault();
$.modal("Sample content just a string");
});
});
</script>
</head>
<body>
<a href="https://google.com/">Click Here</a>
</body>
</html>
Eric,
Very nice work! This is going to make my site look very professional. I have a question for you. I would like to display a questionnaire form using your modal but before I display the form the user must be logged in. So if the user is not logged in I want to display a login form. After the user logs in I want to display the questionnaire form. I want all this done in a modal.
I am using the jquery get request to check if the user is logged in which works fine. If the user is logged in I show the questionnaire form and if they are not I show a login form. Everything works fine up to this point. The problem happens when I attempt to login using the jquery ajax request in the complete option I want to display either the login form again or the questionnaire form if the login was successful but instead the modal says “sending” with the loading animation. Using FireBug I can see it make a get request to load the questionnaire form when it should be doing that yet. Please hlep. Thanks for your time.
I’m having troubles trying to get the .get method to work in FF 2.0 and IE7. Works fine in IE6. In FF it doesn’t work at all, in IE7 it only loads a portion of the content. Can someone look at the URL and tell me what the issue might be?
https://purerxo.com/clint/basic/index.html
I have gotten most of it to work. Now my problem is after the user logs in successfully I do another get to retrieve the questionnaire form but the send button doesn’t work. I think since the form changes the binding of the click event is reset. I try to bind the click event to the new form but it doesn’t seem to work. What could I be doing wrong?
@Kurt – it looks like you haven’t included any of the CSS.
@Joe – without seeing any code (do you have a link?), it’s pretty tough to know what the issue could be…
@Clint – to get the url (why not just use the href?), try:
hi,eric.
why it is not possible to nested modal window?I think the nested modal window is very important and very useful
Eric,
I figured it out. I probably would have never figured it out without Firebug. Thanks for taking the time to respond and for making this cool modal.
Joe
@hotcicada – nested modal windows is a feature that I’m working on…
@Joe – glad you got it figured out! I don’t know how I ever did web development without Firebug! π
hello,
i use this nice plugin for showing errors on my little app, now the problem os that there might be too many errors, which are not completly fit in the dialog.
is there a way of adding some sort of scrollbar to the dialog?
I see in the code that there is a “Stand-alone close function to close the modal dialog”. However, I seem to have problems calling this function. It is easier for me to handle the event that could cause a close and close myself than to use the “modalClose” implementation. An example of how to call close() would be helpful for me.
I simply create a dialog like this:
$(strElId).modal(); //where strElId is string that contains the id of my element (this works fine, I see the dialog)Here are attempts for closing that don’t work:
$(strElId).modal.close();$(strElId).modal().close();
$(strElId).modal.impl.close();
@Michael – you should be able to just add
overlay: autoto the CSS for the content you are placing in the modal dialog.@Karim – in the current version, you just need to call
$.modal.close();. See this post.I using SimpleModal 1.1.1 and jQuery 1.2.3 to play YouTube-videos. It works perfect in Opera, Firefox, and Safari. But i have big problems i IE6 and IE7, and don't know what i am doing wrong.
In IE6 nothing happens visually, but the sound is there, so i can hear the video playing in the background.
In IE7, the overlay works good, but i get double playback of the sound, that means two copys of the video (the sound) are playing at the same time, but visually only one video is displaying.
Her is an example of the code:
<object width="475" height="400">
<param name="movie" value="URLtoYouTUbe" />
<param name="wmode" value="transparent" />
<embed src="URLtoYouTUbe&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="475" height="400" />
</object>
Her is my CSS:
#modalOverlay{height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:3000;
background:#000;}
#modalContainer{position:fixed;
left:50%;
top:15%;
margin-left:-200px;
z-index:3100;
background-color:#fff;
padding:4px 0 4px 0;
border:4px solid #ccc;}
#modalContainer a.modalCloseImg{background:url(x.png) no-repeat;
width:25px;
height:29px;
z-index:3200;
position:absolute;
top:0;right:0;
cursor:pointer;}
Here is my custom JavaScript:
jQuery(function() {
jQuery('a.gluggjs').click(function() {
jQuery.get(this.href, {}, function(data) {
jQuery(data).modal({
onClose : function() {
jQuery('#modalOverlay').css('background-color', '#40566a');
jQuery.modal.close();
}
});
});
return false;
});
});
And i have both jQuery 1.2.3 and SimpleModal 1.1.1 in the head-element of my HTML.
I would be very grateful for any help. You can also contact me at my email. I can pay you for any help on this issue. Thanks!
Great modal!
Could you publish a demo or code for simply loading an external html page into the modal (for those of us who want to use your script but don’t understand jquery.)
I tried to follow the discussion here but got lost.
@artguy101 – check out the contact demo. It contains a lot of extra “stuff” but it does exactly what you mention. It loads the HTML content for the contact form via an Ajax call.
Thanks for the quick reply, Eric. I tried altering contact.js to just display an .html file (and a .php one) but I’m not making it work. Does anyone have a link to an example?
Also, can simplemodal work from inside joomla? My situation is complicated because I’m using dynamic drive’s ajax script to load external pages into joomla content. Modals that use class=”modalboxname” work, but not ones that use rel=”modalboxname”
i click “send”,but “Unfortunately, your message could not be delivered.”
@artguy101 – something like the following should work:
@yobin – can you be more specific? Are you talking about an issue on my site or with code you are working on?
Hi Eric, I am using the code from the confirm example, but I want to use it on only one form that I have on a page. It works for that form, but now whenever a I use a standard JS confirm dialog on other parts of the page, the SimpleModal window pops up as well as the JS dialog. Is there any way I can prevent this?
To clarify my comment (permalink to comment): The problem is only visible when i use &autoplay=1″ in the YouTube-URL. When i don’t let it autostart and the user must click on the video to play it, then it is OK in IE7. In IE6 the problem persist, but i don’t need to support IE6, only IE7.
Hi,
Just wanted to say thanks for this plugin. Nice work !
Gildas
Hi Eric:
I used SimpleModal demo. It works perfect in IE6,But i have big problems in Firefox2.0, and don’t know what i am doing wrong.
error infomation:
uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: https://localhost:8080/havaatry/js/jquery.js :: anonymous :: line 23″ data: no]
can you help me?
Eric:
Contact Form
Hi Eric,
thanks for this very helpfull and nice plugin!.
Working on IE 6 & 7, quirks mode, I applied the patch as described in IE7 quirks mode hack. I ended needing to manipulate #modalOverlay.height since #modalOverlay and #modalContainer go away when scrolling vertically, so I set
#modalOverlay {
background-color:#000;
cursor:wait;
height: 300%;
}
but the plugin forces #modalOverlay.height to 100%. It would be nice if the plugin code honors all propertyΒ΄s value setted from css, or .modal() options.
@Michael – try renaming the function to something other than confirm.
@Asle – interesting. When I have some free time, I’ll try to see if I can figure out what is going on.
@Gildas – thanks!
@Druid – it’s hard to say what the issue could be without seeing any code.
@Patrick – the next version should handle these types of issues better.
i download the Contact Form demo which is in the SimpleModal demo;i run it in localhost.ie6 no problem ,problems in Firefox2.0.I did not change any code what was download from your website.Thanks for your help.
error infomation:
uncaught exception: [Exceptionβ¦ βCould not convert JavaScript argumentβ nsresult: β0Γ80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)β location: βJS frame :: https://localhost:8080/havaatry/js/jquery.js :: anonymous :: line 23β³ data: no]
the code i download from https://www.ericmmartin.com/simplemodal/
Contact Form
Hello Eric. Now i am using SWFObject to play the YouTube videos inside SimpleModal overlay, and that completely solved my problems. Now it works perfect in IE6, IE7, Safari, Opera and Firefox β so i don’t need a solution to this anymore. Thanks! (PS! SimpleModal is great, thanks!)
Thanks Eric, that worked a treat.. i guess i was looking a little too hard to not see that myself! =]
Hello!
First of all, congratulations for the script.
Second, I’m using the Contact Form. My form has to send a file, something like:
but ther’s noway to send the file. Somebody can help me?
Thank you in advance!
Dave Again,
the form does not appear in my last post. It’s just a form with a file input
Thanks
I had this error also in the download of contact form
error information:
uncaught exception: [Exceptionβ¦ βCould not convert JavaScript argumentβ nsresult: β0Γ80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)β location: βJS frame ::……
Hello JP and Druid,
had the same problem:
uncaught exception: [Exceptionβ¦ βCould not convert JavaScript argumentβ nsresult: β0Γ80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)β
my solution was: not just simply click on the “index.html” which you have downloaded in the directory contact! You have to run it on a real webserver because php can only work on a webserver (i.e. install xampp on a testmachine).
Hope this solves your problem too.
To all having the
NS_ERROR_XPC_BAD_CONVERT_JSissue – The contact form demo uses Ajax and PHP – which means it needs to be served through a web server in order to work (as mentioned by manfred).@Asle – thanks! I’ll check out that library and see if there is anything that I can add into SimpleModal.
@Dave – you’d have to not only add the input on the form, you’d also have to code contact.php to handle the file and attach it. See File Attachments on https://www.sitepoint.com/print/advanced-email-php
@Eric Martin = Thanks for your solution π Dave
Eric: Great piece of code, but the lack of a show() method is a show stopper. I need to show the modal programmatically via a JavaScript function. So a second vote for a show() function.
@Greg – the new version will have ability to open and close the modal dialog programmatically…stay tuned! π
Hello,
I downloaded the demo “contact” (https://www.ericmmartin.com/simplemodal/) and I have a problem.
What happens is that the 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, if I click again on the button it simply refuses to show anymore.
In IE6, the javascript error “” appears :
Line : 137
Char : 7
Error : ‘$.modal’ is null or not an object
Code 0
URL: https://…
The source code is the same that in the demo. It seems there is a problem here :
Please, could you help me?
Hello All,
I have solved my problem : I used many JS files and there was a conflict between these files.
Hey great script.
Just one question.
How can I get the modal box to display on page load?
Thanks & great job!
@Oliver – glad you got it resolved!
@Ajay – Try:
Thanks for the great script – its fantastic.
I’ve run into an Internet explorer problem. I’m using the following code in a series of links to call the answers FAQs in your simplemodal. The html links are:
<ul>
<li><a href="/faq1.php/" id="faq1">How does this work?</a></li>
<li><a href="/faq2.php/" id="faq2">How much does it cost</a></li>
<li><a href="/faq3.php/" id="faq3">Can I resell it?</a></li>
<li><a href="/faq4.php/" id="faq4">How do you handle return?</a></li>
<li><a href="/faq5.php/" id="faq5">Do you have an affiliate program?</a></li>
</ul>
and the javascript is:
$(document).ready(function () {
$('#faq1').click(function (e) {
e.preventDefault();
$.get('/faq1.php/', function (data) {
$.modal(data);
});
});
$('#faq2').click(function (e) {
e.preventDefault();
$.get('/faq2.php/', function (data) {
$.modal(data);
});
});
$('#faq3').click(function (e) {
e.preventDefault();
$.get('/faq3.php/', function (data) {
$.modal(data);
});
});
$('#faq4').click(function (e) {
e.preventDefault();
$.get('/faq4.php/', function (data) {
$.modal(data);
});
});
$('#faq5').click(function (e) {
e.preventDefault();
$.get('/faq5.php/', function (data) {
$.modal(data);
});
});
});
Any one of the links open nicely the first time, however after closing the modal window (clicking the X icon) a javascript error occurs and the other links will not open. The error message using FirebugLite is (I’m not sure how to diagnose javascript errors in IE):
Object doesn’t support this property or method (line 49)
But the line number changes depending on which of the five links you click.
This does not happen in Firefox (which is why it took so long to discover my mistake). In fact it works beautifully in Firefox.
All is this is based solely on your Basic demo – and the advice you gave here on how to open a file instead of text in a div. I haven’t changed the CCS or the simplemodal.jquery.js or jquery.js at all.
I am running this in a wordpress background – I’m not sure that that matters. I thought that it was a problem with making to many calls on one page – but it works great with Firefox – so it seems like its a IE thing. Any help would be greatly appreciated.
I enabled script debugging in IE and found that IE is getting hung up on $.modal(data); in the following javascript. On this particular page I have five links that use similar blocks of this code (just changed for the particular FAQ its requesting). This is why the error is on a different line depending on which link you select. The error just moves to the appropriate javascript line but it is always $.modeal(data).
$('#faq5').click(function (e) {
e.preventDefault();
$.get('/faq5.php/', function (data) {
$.modal(data);
});
});
I really appreciate any help you could offer.
Eric – thank you for your fine work here. I diagnosed the error – it was on my end. I failed to delete wordpress’ wp-footer function with placed your smcf javascript into the document. This resulted in a conflict that Firefox could resolve but IE couldn’t. It was clear that the problem was with my document given that $.modal(data) was the hang up. So I looked at the page source that wordpress kicked out and found your smcf output on a page that didn’t call for it. I eliminated the wordpress function from the FAQ page template and I was golden.
I works beautifully. Thank you – you’re a genius. Where is your donation page?
Hello Eric,
Is there a way to get the same window as in your demo called “Contact” but with the treatment that you can see here :
https://jetlogs.org/jquery/floating_dialog.php
I would say that I would like to use your simple modal but when I click on submit, I would like the data are written in the window which contain the button which allows to open your simple modal.
Thank you very much for your help.
Hi Eric, love the script.
Is there a way to place a YouTube embedded video in the modal?
I added the object doe from youtube to a “div” and made it modal, Firefox works, but IE7 gives an error.
Beating my head against a wall trying to figure it out.
Would your solution also work for google maps?
Thanks
Dan
Sample code –
Sorry, here’s the code
<div id="videobox" class="videocontainer" style='display:none'>
<table border="0" cellpadding="8" cellspacing="0" width="600" height="406" background="images/fav-yellow-grad.gif">
<tr><td valign="top">
<object width="425" height="355">
<param name="movie" value="https://www.youtube.com/v/JikaHBDoV3k&hl=en"></param>
<param name="wmode" value="transparent"></param>
<embed src="https://www.youtube.com/v/JikaHBDoV3k&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
</td></tr></table>
</div>
Hi Eric, really nice plugin. I have a problem, i hacve spent a much time, i want to put an image inside of the simplemodal. I don’t know the image size so I can’t center it.
I’ve been tring a code like this:
$(‘a#test3’).click(function (e) {
e.preventDefault();
$(”).modal();
});
and a CSS similar,
#modalContainer {height:auto; width:auto; margin-left:auto; margin-right:auto; background-color:#fff; border:3px solid #ccc;}
Hi Eric, I’m afraid my last post was incomplete, (I forgot <code> tags :-))
Thank You, Daniel.
it’s suppose to be:
$(βa#test3β²).click(function (e) {
e.preventDefault();
$('').modal();
});
@DPF – do you have a link I can view?
@Dan – I haven’t tried placing a YouTube video inside or google maps. If I have some time, I’ll give it a try.
@Daniel – I’m not sure what you are asking. I don’t know what you are trying to do with
$('').modal();. Please clarify so I can help…My last post has disappeared, I don’t know what has appened. What I want to do is put an image inside the simplemodal, I don’t know the size of the fotograph so I have problems to center it.
Thank for atend my post (Sorry for my disgustin English)
Daniel
this the code:
$('a#test3').click(function (e) {
e.preventDefault();
$('<div id=\'container\'><img src=\'https://www.myurl.com/files/images/cereals.jpg\' /></div>').modal();
});
Is it possible to use SimpleModal to show a modal window overtop of a certain block element on the page (such as a div) without blocking the whole page?
this is roddic again
my last post has been disappeared.How will i will add extra form property(like enctype=”multipart/form-data”) in this contactus form….
π
I have the same problem like roddic.
I just want to use this simple modal contact form for image upload .Is it possible to upload image or any file using this modal window.
Hi Eric
Great plugin you made, but i have one question about using phpmailer.
I’m not using english characters, so i become strange chars on my email.
So, i have added this to Build header:
$header .= "Content-Type: text/html; charset="charset=utf-8"";And this didn’t help.
Any suggestions? i would like to use utf-8 charset encoding.
Thanks
Hi
I have solved thid encoding problem.
You have to change contact.php and add this lines to Build header.
// Build header
$header = "From: $email\n";
// add
$header .= "Content-Type: text/plain; charset='utf-8'; format=flowed\n"
. "MIME-Version: 1.0\n"
. "Content-Transfer-Encoding: 8bit\n"
. "X-Mailer: PHP\n";
That’s real good job !!!
Just one little question from a ‘beginner” :
When using simpleModal, is it possible to “open” the “modal window” by clicking on a picture instead of a “Demo” (or other !) Button ?
Thanks a lot
Hi Eric
How to increase the height of the container dynamically?.
I am using external style sheet to define the styles to the container. I am adding DOM elements dynamically(say for some condition) to the modal .So while adding the
DOM elements to the modal i want to increase the height of the container.How can i do it.Thanks in advance
@Daniel – I would manually load the image and then determine its dimensions in order to center it within the dialog. Something like (untested):
@Adam – SimpleModal is currently only for page blocking, not element blocking. I’ve thought about adding that feature, but for now, I’d suggest using BlockUI.
@roddic, RNS – I don’t see any reason why you couldn’t use a dialog to as an upload form…
@Saso – I haven’t added it into the Contact demo yet, but I added a UTF-8 support in SMCF. I’ll be adding it into the Contact demo soon.
@HervΓ© – you can open a modal however you like π
@BenkiBirugaali – you’d probably want to use one of the callbacks and just re-set the CSS values:
Thank you Eric.
Thanks a lot Eric,
Eric – Thanks for answering my first question.
Do you have any examples of a way to create a modal window that can be moved around the screen to different areas and resized?
I want the content inside simple modal to be scrollable. I tried adding
#modalContainer
{ overflow:scroll;}
I get scrolllbar, but X image is getting clipped, Can you suggest some alternatives?
Hi,
This one really a good plugin.
I have a question ( maybe stupid one ) is that I follow the instruction and
setup the contact form ( demo one ) and it is work fine. but once if I make
any change of the contact.php, it seems didn’t sync back when call it again.
only if I clear IE’s cache, it will be fine. so is it an issue of ajax?
or any alternative way to slove this issue?
Thanks/Davis.
Thanks a lot, Eric
Hi Eric,
Can I have some hint that if I want to modify this contact demo form furthermore? ie currently inside contact.js, xhr.responseText will contains the returned html from contact.php’s output, so how about if I want to use this xhr.responseText result set to create a new modal inside the current modal window? as I want use it as a master-detail input form purpose. so once user input login and successful, it will retreive related data in the same modal screen.
for example, if
xhr.responseText contains serval other input field ( kinda same css defination ) for user interact, so if create a new modal, something like that?
$(xhr.responseText).modal({
close: false,
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
I have no idea at all how to archive it, appreicate for any hints.
THANKS/Davis.
Hello,
This is a real nice plugin. Unfrtuanately it doesn’t work with Jquery 1.1.2. Has anyone found any solution for this? I really like to use this plugin. However in IE 6 it is appearing all the way to the down (left) and the close button (X) at the top.
Thanks
Shaila
@Adam – I haven’t tried implementing any sort of draggable/resizable dialog yet. You could always try the UI libraries for that…and could even use the dialog library which should have PNP support for those features.
@Gaurav – I’d suggest putting the overflow property on the data itself and not the container.
@Davis –
#1: Since the $.get function doesn’t allows for the cache property, you could try adding a “timestamp” to the URL to make it unique. For example, in contact.js, change:
To:
#2: Currently SimpleModal does not support multiple dialogs at the same time. However, the new version I am working on will support it.
@JqCoder – I’ve tested it with 1.1.2 and not had any issues. If you are talking about the contact form, then you are correct, it uses animation functions that aren’t available in 1.1.2. What is preventing you from upgrading jQuery? As for your IE6 issue, is this an issue on one of your pages or one of the demo/test pages?
Hi Eric,
Thanks for your hints.
for #2, i have a workaround temporary now as …
close current modal window, then popup/create a new one immediately ( with retreived xhr.responseText’s data ).
now all i tested in IE7 only and fine, but once try in FF2, it got an error
uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: https://localhost/icanchat/javascript/jquery/jquery-1.2.3.pack.js :: anonymous :: line 11″ data: no]
im using jquery-1.2.3 & SimpleModal 1.1.1
so any idea about it?
Thanks/Davis
Hi Eric,
Please ignore previous error issue, i found where caused it.
Thanks/Davis.
Hi Eric,
I found the error generated due to php program fail to return html output.
as Im using php + smarty template build for my website, so in this case
code>
inside contact.php
$t->display( ‘contact.tpl’ );
which contact.tpl file will included all html that I want to output to modal.
the problem it seems that smarty function not work at all in FF2 in this suitation. ie $.get() -> php -> smarty template function, but fine in IE browser.
so if any comment about this issue will be much appreciated.
Thanks/Davis.
Hi,
The script works great for me. I have just starting testing in firefox 3, and the dialog seems to show behind any flash on the main page. Is this a know issue? Are there any easy workarounds?
Thanks
Peter
Eric,
sorry, it must be lot of coding and make myself crazy…)
previous error due to something wrong of the tpl ( template file ) only hit in FF2, now sloved.. sorry again if bother you look at it.
Davis.
The following changes seem to keep the dialog infront of flash videos for firefox 3. Not sure if this is the best way to do it, but it seems to work for me.
and a bit further down….
EDIT (Eric): added missing + operators and formatted code
Hi,
I am using contact demo for some more modification and got a problem to seek anyone help. thanks in advance.
I got a markup with contact.php will process this input file, as usual this contact.php call by $.ajax()
contact.php
if( is_uploaded_file( $_FILES[‘imgfile’][‘tmp_name’] ) )
{ babaababab }
but don’t know why php is_uploaded_file() returned fail. i call $.ajax with following, is it somthing need to set for it?
$.ajax({
url: ‘contact.php?ts=’ + (new Date()).getTime(),
data: $(‘#contact-container form’).serialize(),
type: ‘post’,
cache: false,
dataType: ‘html’,
complete: function (xhr) { … }
Thanks/Davis.
oops..btw, markup just a simple file type with name=’imgfile’
thanks/Davis.
Hi,
I have one problem in IE7… Why script working slowly than necessary?
function modalOpen (dialog) {dialog.overlay.fadeIn('slow', function () {
dialog.container.fadeIn('slow', function () {
dialog.data.show('slow');
});
});
}
And after ‘modalOpen’, memory usage up from 50mb to 80mb?
Sorry for my english. thx.
I’ll have to use that on my own projects. Thanks for the jquery box.
How does this get around the bug in Firefox where textboxes have no cursor inside a modal dialog?
@Peter – thanks for the suggested code fix. When I have some time, I’ll look into it further.
@Davis – glad you got your first issue worked out π As for the upload issue, in reading the PHP docs for
is_uploaded_file, it looks like it only works for a HTTP POST. Even though you havetype: 'post',, the fact that you are adding values to the query string (GET) might be causing an issue. Try changing that back to justurl: 'data/contact.php',and see if that works.@Konstantin – I can’t reproduce the issue that you describe. Is it happening on one of my pages or on something you’ve coded?
@Dobes – what version of FF are you using? I’m using 2.0.0.14 and I don’t have any issues with the cursor. I do remember running into this issue, but can’t remember exactly what I had to do to fix it π
Hi eric,
Followed what your suggestion, but no luck..:(
I got another text input field inside the same form, no problem at all can access it by
$_POSTin either url: data/contact.php or contact.php?ts=…. way, strange?in general, inside a form definition, it supposed should include
, is it possiblefor the ajax
dataType: 'html'issue? also tried set to ‘multipart/form-data’, also no luck.Thanks/Davis.
I meant ‘multipart/form-dataβ in general will include in a form if any input file type included. Thanks/Davis.
@Eric – Thanks for thinking about it – I guess I’ll take a look at the code and see if I can figure out what you did.
Hi, great plugin.
I have one question. Is it possible to put some css for overlay to make shadow ? Currently I’m using modified by myself thickbox plugin to achieve this effect but your plugin looks better and if I could achieve shadow for overlay it would be great.
Hi Eric,
As somebody reported that
$.ajaxdidnt support file upload inside a form, but jquery.form plugin did support it, so i have try to call in this way, and need help how to activate it..:)show: function (dialog) {
$('#contact-container .contact-login').click(function (e) {
e.preventDefault();
$('#cool').ajaxForm( {
success: function () { alert('x');}});
a form with id='cool', but why nothing happen when that submit button being clicked?
Thanks/Davis.
@Eric,
I have fixed file upload issue using ajaxform, pretty cool jquery plugin.
Thanks for all your help.
Hi Eric,
Firstly, Excellent plugin !
I am using the contact form to retrieve a users email address. However I want to call this form repeatedly to retrieve different email addresses. Is there any way I can pass in the (email) text field which I want to populate with the value entered on the simple modal contact form? Otherwise I will have to duplicate the javascript code for the form each time I want to retrieve a different email address.
Hi,
I want to use this on multiple links on the same page displaying different content inside the box each time. How would I do this?
You should really change the CSS that tells the mouse to use the wait cursorβI always think that its locking up the browser! And in Opera the close button doesn’t load so I have no way to close it =[
I’m having a problem with IE6 and IE7. For whatever reason, when I set the modal box to display:none; it causes my background graphic in the div to disappear. When I take out the “display:none” it works fine, but then the div shows at the bottom of the screen. Any ideas?
@Davis – glad you got it working π
@Dobes – Here are a couple links about the issue:
https://extjs.com/forum/showthread.php?t=1519
https://livepipe.net/community/control_suite/181
I think my demo’s and test’s don’t have the issue, so it should just be a matter of tweaking your CSS.
@Bastor – I don’t have anything built-in, but there are certainly plenty of jQuery shadow plugins available:
https://www.google.com/search?q=jquery+shadow
@bubbles – there have been others that have asked a similar question. I’ve given some ideas above…but basically, you’d have to modify the JS file to look for the address or identifier from the link itself.
@James – wire up a modal call for each link…see the tests for examples. If this is not what you are asking, let me know.
@Kevin – 1) if you don’t like the cursor, feel free to change it π 2) Are you referring to pages on my site or your own? When I view the demos and tests in Opera 9.25, I see the close icon.
The beauty of SimpleModal is that you can very easily modify any of these behaviors to fit your needs.
Love the contact form.
β¦ But. When I Download The Contact form to my machine, it won’t open when i click the button. The background fades down but the contact form won’t show up.
Im new to this, is there anything, that I maybe have forgot to install? (work on mac 10.4.9 with firefox and safari)
hi, i’n new to al this .jquery stuff, i’m trying to get a working contact for in wordpress 2.5 i downloaded, and activated the plugin, everything goes well, but y don’t get the mail form windows when i click the link, i just get a http://www.loki-studios.com/contact not found message, i just want a simple contact form that pops up, what am i doing wrong? can someone help me with this?
Hi,
thank for your great piece of code.
I’m currently using it with success in a page of my site, but I’ve a problem with another one, occuring only in IE7.
The source code for a test page reproducing the error is the follow:
Test
Pagina di prova con popup
function avviaPopup(){
$('#basicModalContent').modal();
}
Every time I try to open the page, IE7 complains about an error on line 19.
I’m not able to overtake this problem, can you help me on this issue ?
Thank you,
Denis
Eric, your plugin is awesome. It’s helped me learned a lot about JS and jQuery in general.
Got a question (for both Eric and anyone else who might know). In IE8, when I call modal(), the background opacity is complete no matter what I set it at. I’ve tried this with a couple of other jQuery plugins and had the same result. Is this something deeper in the framework that is causing this or a bug of IE8 with modals?
I went to Facebook to see if it was affecting all modals, and it was not.
If anyone has any insights into this problem, let me know!
Cheers,
Simon
https://www.ericmmartin.com/projects/simplemodal/#comment-1158
Hi,
That code help me to solve my problem.
body {background: url('/images/spacer.gif') no-repeat;
background-attachment: fixed;
}
In IE script working not so fast than in FF, but better and faster, than earlier.
Thx.
I am writing a page that appears in an iframe within another page. The iframe with my page usually has a scroll bar. The top window does not. I’d like to have an overlay cover the document in top window instead of the document within the iframe. I can insert a div in the top frame like this:
var overlayDiv = jQuery("#srgModalOverlay", top.document);
if(overlayDiv == null)
{
jQuery("div#portalOuterContainer", top.document).append("\n\n");
}
else if(overlayDiv.length == 0)
{
jQuery("div#portalOuterContainer", top.document).append("\n\n");
}
From my document, is there a way to launch the modal dialog in the document that contains the iframe?
Thanks.
Jim
Sorry. Here’s the code:
var overlayDiv = jQuery("#srgModalOverlay", top.document);
if(overlayDiv == null || overlayDiv.length == 0)
{
jQuery("div#portalOuterContainer", top.document).append("\n<div id='srgModalOverlay'></div>\n");
}
Hi Eric,
Thanks for the plugin. Very nice work! I have implemented it on a page with a flash movie. I am using the CSS for the contact form dialog. When the modal box appears it is below the SWF. I set the z-index of the swf to -999 but it still shows up below the movie. Do you know happen to know a fix?
Also, is there a way to dynamically load the script that controls the dialog (contact.js for example) on a button click instead of loading each .js file on initial page load?
Thanks.
Hi!!!, I have a problem with Browser IE 7, efect appears in FIREFOX 3.0 but not in IE 7, what is the problem, please help me.
IE 7 show contact form fast, and appear horizontal barr, I don’t understant
@all – sorry for the lack of responses…between work and a week long vacation, I’ve been a little busy π
After this, I’ll be closing the comments on this page. For support, you can use the jQuery mailing-list or contact me directly.
@Andes – you shouldn’t have to install anything, but it does need to be used through a web server, as
it makes an Ajax call to a PHP file. I’ve seen the issue you are talking about with the WordPress SMCF plugin, but not with the Contact Demo. If you have a link that I can view, let me know.
@Armando – sounds like something is not setup correctly. I tried to view the link, but the site doesn’t appear to be up.
@denis – sounds like an issue with your code. Could be a conflict or any number of things, but without seeing what you have, it’s hard to tell.
@Simon C – thanks! As for the IE8 issue, it looks like it might be an issue with the jQuery opacity function, but I haven’t had time to look into it any further. Since IE8 is in early beta, I wouldn’t worry about it too much…I’m sure either IE or jQuery will get it sorted out π
@Konstantin – interesting. Sounds like it’s maybe an issue with something on your site?
@Jim – if I understand you correctly, you’d probably have to modify the code to accept an “option” of where to append the overlay (and/or iframe). For example (untested), you could call SimpleModal with:
And then modify the src, changing the following part in the this.dialog.overlay and this.dialog.iframe
.appendTo('body');to:@Shawn – try using SWFObject like Asle did. To your second question, have you tried $.getScript?
@Percy – do you have a link? It sounds like an issue with your site/code…