v1.2.3
Summary | Demos | Tests / Examples | Download | Support | Usage | Styling | Options | Callbacks
Other Notes | Changes in 1.2 | Upgrading
Other Notes | Changes in 1.2 | Upgrading
Deprecated: please see the current version.
Archives: SimpleModal v1.1.1 | 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.
Demos
Tests / Examples
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.2, you have the option to use external CSS or to pass in CSS attributes for the modal overlay, container, and data elements as options. The options are:
overlayCss,containerCssanddataCssand take a key/value object of properties. See the jQuery CSS Docs for details. - SimpleModal internally handles the setting of the critical CSS properties, to prevent having to manually define them. Now in 1.2, SimpleModal dynamically centers the modal dialog and also adds a position option, for manual positioning.
- SimpleModal internally defines the following CSS classes:
simplemodal-overlay: (previouslymodalOverlay) used to style the overlay div – helpful for applying common styles to different modal dialogssimplemodal-container: (previouslymodalContainer) used to style the container div – helpful for applying common styles to different modal dialogssimplemodal-data: (previouslymodalData) used to style the data element – helpful for applying common styles to different modal dialogsmodalCloseImg: used to style the built-in close icon (part of the closeHTML option, so this class is not changable)
Example: Applying CSS directly via the options
* Note: because modalCloseImg is not an actual element, you’d still need to use external CSS to style it
data.modal({
overlayCss: {
backgroundColor: '#000',
cursor: 'wait'
},
containerCss: {
height: 400,
width: 600,
backgroundColor: '#fff',
border: '3px solid #ccc'
}
});
Example: Applying CSS via an external stylesheet
#simplemodal-overlay {
background-color:#000;
cursor:wait;
}
#simplemodal-container {
height:400px;
width:600px;
background-color:#fff;
border:3px solid #ccc;
}
#simplemodal-container a.modalCloseImg {
background:url(../img/x.png) no-repeat;
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-14px;
right:-18px;
cursor:pointer;
}
- For IE 6, the following will handle the PNG used for
a.modalCloseImg:
<!--[if lt IE 7]>
<style type='text/css'>
#simplemodal-container a.modalCloseImg{
background:none;
right:-14px;
width:22px;
height:26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/x.png', sizingMethod='scale'
);
}
</style>
<![endif]-->
Options
Both of the SimpleModal modal() functions accept an optional options object, which can contain any/all of the following (default value):
iframe: [DEPRECATED in 1.2.2]
Update yourobjectandembedelements with the wmode property.overlay: [DEPRECATED in 1.2]
See opactiy, belowopacity: (50) [renamed fromoverlayin 1.2]
The opacity value, from 0 – 100. 0 = transparent 100 = opaqueoverlayId: (‘simplemodal-overlay’)
The DOM element id for the overlay divoverlayCss: ({})
The CSS styling for the overlay divcontainerId: (‘simplemodal-container’)
The DOM element id for the container divcontainerCss: ({})
The CSS styling for the container divdataCss: ({})
The CSS styling for the data divzIndex: (1000) [new in 1.2]
Starting z-index valueclose: (true)
Show the code in thecloseHTMLoption (below)?closeTitle: [DEPRECATED in 1.2]
See closeHTML, belowcloseHTML: (‘<a class=”modalCloseImg” title=”Close”></a>’)
[new in 1.2] – The HTML for the default close link. SimpleModal will automatically add thecloseClassto this element.closeClass: (‘simplemodal-close’)
The CSS class used to bind to the close eventposition: (null) [new in 1.2]
Position of container [top, left]. Can be number of pixels or percentage. If not set, SimpleModal will center the container. To only set one value, leave the other blank. For example: [top,] or [,left].persist: (false)
Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original 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 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');
});
});
}});
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 elements. If you are including another plugin (TinyMCE, DatePicker, etc.) in a modal dialog, this is where you want to initialze that plugin.
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 elements. After you’ve applied effects, etc., you’ll need to call$.modal.close();so SimpleModal can re-insert the data correctly and clean up the dialog elements.
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!
});
});
});
}});
Other Notes
Default Values
- If you have a value that you want to be used for all modal dialogs, instead of passing the option in for each one, you can globally modify the defaults.
Example – Single Property
$.modal.defaults.closeClass = "modalClose";
Example – Multiple Properties
$.extend($.modal.defaults, {
closeClass: "modalClose",
closeHTML: "<a href='#'>Close</a>"
});
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 the
persistoption is true, SimpleModal will “re-insert” the original element, with changes intact. If you use anonClosecallback, you’ll need to call$.modal.close();(see the onClose in the Callback section above). - SimpleModal always removes the overlay, container and iframe elements when closed. If you use an
onClosecallback, you’ll need to call$.modal.close();(see the onClose in the Callback section above)
Known Issues
- In IE6, the state of checkboxes and radio buttons are not maintained using the
persistoption. - In IE7, the state of radio buttons is not maintained using the
persistoption. - To prevent Flash objects from “bleeding through” the dialog, make sure to set the
wmodeproperty for yourobjectandembedelements to eitheropaqueortransparent(reference).
Browser Compatibility
SimpleModal has been tested in the following browsers:
- IE 6, 7
- Firefox 2, 3
- Opera 9
- Safari 3
Changes in 1.2
* From ChangeLog.txt
- Added new internal variables (ie6, ieQuirks and w)
- Added better IE6 detection (preventing false positives with IE7)
- Fixed $.modal.close() function to correctly utilize an onClose callback without causing a infinite recursion crash
- Added new options (dataCss, zIndex, closeHTML and position)
- Renamed overlay option to opacity
- Removed closeTitle option
- Renamed default class and id names from modalXxx to simplemodal-xxx
- Added better z-index handling – initial value can be defined through the options
- Fixed element creation to be XHTML compliant
- Added window dimension detection
- Fixed Safari issue (directly setting display:’none’ as opposed to using .hide())
- Changed width/height setting for overlay and iframe
- Fixed IE7 positioning issue in quirks mode
- Added IE6 expression for elements – eliminating the need for an external stylesheet
- Added dynamic centering of container as well as a position option for manual positioning
- Added namespacing on events
- Added window resize listener to resize dialog elements
- Updated demo and test/example pages
Upgrading
Things to be aware of when upgrading to 1.2 from a previous version:
- If you used the
overlayoption, you’ll need to rename it toopacity - If you used the
closeTitleoption, you’ll need to now use thecloseHTMLoption instead - Remove the container positioning CSS from your stylesheet (remove the
top,left, andmargin-leftproperties) - Remove any IE specific container positioning CSS
- Overlay, container and data class and id names changed! Update your code/CSS or use the
overlayIdandcontainerIdoptions to have SimpleModal to use the old id names. closeClassoption value changed! Update your code or use thecloseClassoption to have SimpleModal to use the old class name (modalClose).
The following option overrides should help with backwards compatibility, although you’ll still have to update your CSS. Place this somewhere after you include SimpleModal but before you create a modal dialog:
$.extend($.modal.defaults, {
closeClass: "modalClose",
overlayId: "modalOverlay",
containerId: "modalContainer"
});
Pingback: ะะปะพะณ web-ะผะฐััะตัะฐ » ะัั ะธะฒ ัะฐะนัะฐ » ะะพะดะฐะปัะฝัะต ะพะบะฝะฐ: ะฟะปะฐะณะธะฝ SimpleModal ะดะปั jQuery. ะงะฐััั 2
Pingback: ะะปะพะณ web-ะผะฐััะตัะฐ » ะัั ะธะฒ ัะฐะนัะฐ » ะะพะดะฐะปัะฝัะต ะพะบะฝะฐ: ะฟะปะฐะณะธะฝ SimpleModal ะดะปั jQuery. ะงะฐััั$npsp;1
Pingback: Modal Delete Confirmation Version Two Using jQuery SimpleModal Plugin Demo | Pedram Development
Pingback: jQuery SimpleModal Plugin Version 1.2 with NicEdit WYSIWYG Editor
Pingback: Excelente listado de 240 plugins para jquery | Adictos a la red
Pingback: Modal Delete Confirmation V3 Using SimpleModal jQuery Plugin Demo
Any progress on the version that supports multiple dialogs?
@Doug – there is a version on source control (under branches) that I’ve been working on that has multiple dialog support and true modal support (prevents interaction with the page behind the dialog). I’m going to see what, if any, issues come from the 1.2 release and will work on refining the code for a 2.0 release.
Hi, I have not upgraded my simplemodal or contact js/css yet. I’ve had it installed since about february 08. I was sure it was working in Internet Explorer, but I’m a mac user so I don’t check often. As of yesterday, my simplemodal windows are no longer appearing on top of everything in ie7, even though they are still working fine in firefox (pc and mac) and safari. In ie7, they appear at the very bottom of the page, surrounded by grey (which is my bgcolor). Does 1.2.1 fix this? I make extensive use of modals with many many different forms (not just a contact form) and validations in the js class on my site, so I’d prefer to avoid an upgrade if I can get to work again using the old class and css. Any ideas?
@t vainisi – sounds like your page does is in quirks mode. If that is the case, there are a couple of options. 1) fix your page/doctype to be valid, 2) apply the fix to your existing version of SimpleModal or 3) upgrade to 1.2.1.
Eric, wow thanks for the speedy response! I implemented the fix and the problem improved right away. But (isnt there always a but) its not quite right. Now the semi-opaque overlay only covers an area equal to the window size, starting from the top. But since my window scrolls, i can scroll away the modal window and the overlay, or, if I scrolled down to find the button to pop up the modal window, I have to scroll the page up to find the overlay and modal window. I’m almost positive this is a css issue – what values do i need to look at? Here is a link to my css page: https://www.curriculum-framer.com/css/contact.css
Eric, I thought it was curious that you felt I was running in quirks mode, since I use the exact same doctype that you do (xhtml trans). But it turned out I was indeed in quirks mode because some of my include files have html comments in them that preceded my doctype declaration! Once I removed them and made sure the doctype declaration was the absolute first thing on my page, simplemodal resumed its flawless operation in ie7. Thanks for the help and the great jquery module!
By the way, I’m a fellow 1974 birthee as well! Divide and Conquer!
@t vainisi – I’m glad you got it figured out! I’ve seen those types of issues enough to narrow down the causes ๐ What month were you born?
I have a long modal div that is taller than the hosting page. Due to the modal nature (blocking the hosting page), I cannot scroll down to the bottom of the modal dialog. I tried adding vertical scrolls on the modal’s div, but that does not do the job, either.
Any suggestions?
Thanks,
Edmund
To make it work in IE6 I had to modify line 63 and 64 to:
var ie6 = $.browser.msie && parseInt($.browser.version) == 6,
ieQuirks = $.browser.msie,
Otherwise it didn’t pick it up as IE6.
Hi. I think that I found an error in 1.2.1.
When I’m using “position:[10,10]” in options – I get correct horisontal position, but incorrect vertical one (object centered vertically) in MSIE 6. FF 3 displays object correctly.
If I’m commenting out line 319 (s.setExpression(‘top’,…) – error disappears (so I think that error in this line) but this line required for correct displaying of object on pages with vertical scrollbar – like my case ๐
I hope that You quicly fix this error ๐
P.S. Do you speak russian? ๐
@Edmund – do you have a page I can view? The scrolling idea should work – what exactly is the problem?
@Simon – hmm…I’m pretty sure I tested in IE6, but I’ll take another look. Thanks.
@Igor – Thanks, I will test this one again as well…and no, I don’t speak Russian ๐
@Edmund – scrolling is working. You need to use
overflow: auto;
in modal container style and define height of your modal window explicitily or use max-height (max-height don’t work in MSIE).
Eric,
Is it possible to make the Simple Contact Modal contain my own html form?
I like how it looks and functions.
If it is possible how to do it? what code do I change and what files to change.
I have been reading and reading and I am a bit lost.
@Tammie – If you want to change the elements in the contact form, you’ll need to edit the data/contact.php file. You’ll have to add the form elements, add the code to capture them from the request and the code to send them in the email. You’ll also have to modify the js/contact.js and css/contact.css files as needed.
Eric,
It is not working correctly when I insert the code into contact.php, the window does not open at all.
This is the type of html, I am using a form generated for my email list.
Here it is:
Name:
Email:
@Igor – I was able to get IE6 positioning correctly…will release shortly
@Simon – AFAIK, IE6 does not support XMLHttpRequest, so I’m not sure why you had to remove that. A side effect of removing that check is the possibility of false-positive IE6 detection for IE7 browsers.
Hi! Good work. But I find the bug. in Opera 9.62 when main window have flash (simple swf animation input by SWFObject). The modal is under the flash – flash is overrides part of modal window. Please fix it. I use simplemodal-1.2.1
@Dimas –
that is what the iframe:true option is forRemoved in v1.2.2UPDATE: It turns out that the iframe option does not work for all browsers. It looks like the correct way to deal with Flash is to use the wmode property (opaque or transparent). Example:
So, I’m thinking of just removing the iframe option…
I noticed a possible error in IE 7. By not setting the persist:true I got a ‘nodeType is null or not an Object’ message every other time I clicked a link that calls the modal. First click works fine. Second time error. I haven’t had enough time to test it further, but I thought I would bring this up. Also worth noting is that the page uses two modals, but the other modal doesn’t have this issue and it is set to persist:true. Not sure if this is related to the Clone issue in jQuery with IE 7.
I will post more info if I come across anymore information! Other than that, awesome job Eric, and thanks!
@Zacko – can you try the test page to see if you have the same issue there? I can’t seem to recreate the issue…
@Zacko – sorry, I just remembered that this is a known issue with jQuery and IE. Calling clone() on an object or element that contains an object, does not work in IE.
I tried the demos in IE6,but they didnt show up correctly. Does anyone else have this problem?
I just tested (again ๐ ) with IE6 and they appear fine. What version of IE6 are you using?
Thanks, Eric! v1.2.2 fixes my problem in IE6.
@Igor – great, glad to hear it!
Pingback: ะะฑะทะพั SimpleModal 1.2.2 | ะ ะปะฐะฑะธัะธะฝัะต ะธะทะฒะธะปะธะฝ
Hi!
Can I use the modal with class instead of id? I have many little “false windows” on page (made with divs and images to simulate a mini-window on window’s center), so because this I can’t use same id. To control what mini-window will be viewed, I use this:
$('a.linkModify').click(function (e){
id = $(this).attr('rel');
// I use the 'rel', that contains a number that indicates what div will be showed
e.preventDefault();
$('#inputProd' + id).modal();
// and here I indicate the correctly div to show
});
Can you see the situation? I have 20, 25 divs on page that needs be viewed on modal…
Can you help-me?
I have the CSS code, I can’t use the basic.css, but, I don’t use id (#simplemodal-container), I need to use the class “.miniBox”…
Sorry the grammar errors, I don’t speak english very well, but I tried…
Thanks!
@Paulo de Tarso – the id’s that are used by SimpleModal should not affect your situation – since only 1 modal dialog can be created at a time.
You have the option to override the id’s being used, or you could just add the miniBox class to the element you are displaying.
Hey,
Awesome plugin, I’ve used it a few times now and it’s very easy to use. There’s only 1 minor issue I’ve come across while testing in IE6.
If the content of the website isn’t as high or higher than the full browser window height, the overlay doesn’t stretch the full window, but stops right at the bottom of the content.
Thanks
@Caspar – Thanks! Do you happen to have an example or link that demonstrates the IE6 issue?
Hi Eric, in which file does smcf calls jquery.js in wp-includes :S, i should edit it because jquery is being loaded twice.. thx
@Birkalem – you could just open smcf.php and comment out the following line:
However – the “best” option is to fix whatever else is loading jQuery to use the same function as above. If possible, all scripts and stylesheets should be loading through WordPress functions – it will help prevent these kinds of issues. ๐
Hello,
We are having problems posting form parameters from the same form. The application works perfectly good when we send input variables but it gives us issues when a file parameter is sent.
Looking forward to hear from you.
@Susan – Are you doing a traditional upload (form submit) or trying to do it via Ajax?
If you are having issues just trying to do it the traditional way, let me know – otherwise, it is not possible to do a direct file upload with Ajax. There are a number of workarounds – one common way is to have the form post to an iframe, and then check the iframe for a response.
Hi,
We were trying to do using traditional file upload.If you have any tips do let me know. I would give a try to use Ajax.
@Suzan – I’d need to see the page or sample code to know what the problem might be.
Hi,
I was trying to put checkboxes in the modal box, but when the user closes it, the values are erased. How do I make the values (ie. checked checkbox) stay?
nvm, its just persist
how to upload a file using simple modal
Pingback: SimpleModal - jQuery Mesaj Kutusu | Enver Tekay
Is there any plan to support dragable ?
thanks
I don’t have a link (yet..) as I’m still working on the website. I managed to fix the issue by changing a little bit of code:
I changed this:
into this:
The things I’ve added were:
and:
Hello Eric,
I guess this might be a simple question. Is it possible to open a new page in the modal popup? something like using window.open(…). If yes, could you please tell me how to do it?
Thank you,
Anil.
Hi Eric!
Thanks for the last answer, so, you told me:
“You have the option to override the idโs being used, or you could just add the miniBox class to the element you are displaying”.
How can I do this? Sorry if this is a basic question, but, I’m not getting.
Where I can change the id that will be used for the script? If you can show me an example working… A page with two or three modal box with differents id’s…
Can you? :-p
@abrar – that’s a loaded question/request ๐ Have you decided how it will function? Have you tried anything?
@Nima – you can make it work with UI Draggable bu using the onShow callback:
You’d want to have an element in your dialog that you could use as the handle, and pass the selector/element as the handle option to the draggable function.
@Caspar – thanks. I’d still like to see a page (if anyone has one) that demonstrates the issues/bug.
@Anil – what exactly are you trying to do? If you want to display a page inside the modal, you’ll need to use an iframe.
@Paulo de Tarso –
I’ve made a little test html:
It works fine in FF (3.05), IE7 (7.0.5730.13), but not in IE6 (using MultipleIEs..)
Hi again!
Thanks, now it’s working like I want.
But I was trying use the Draggable Plugin as you told to Nilma above, and I look that we need change the variable “persist” to true, for the script works correctly when we open the same modal again. And, I have three questions about the Close button:
1) I would like to change the :hover state for the button, but, only with CSS I can’t, (doesn’t work). I tried like this:
a.botaoFechar {position:absolute;
top:5px;
right:3px;
display:block;
width:21px;
height:21px;
background:url(botaoFechar.gif) 0 0 no-repeat;
z-index:3200;
cursor:pointer;
}
/*
Until here, it's working
The image used to the button contains the two steps in same, where I control the background-position to make the :hover effect, but, doesn't work
*/
a.botaoFechar { background-position:0 -21px; }
Where can I change to make this? It’s possible?
2)I want to create another button inside the modal box that can close the modal and stop the overlay. I saw that I need stop them manually, but I’m not getting. What I need to do? For example, I have a button:
CarregarHe is inside the modal, and I would like that when I click, he makes the check oh the others inputs, and, if the inputs was filled (this I can do, no problems), I want that close the modal and stop the overlay.$('#carregar').click(function(){if($('#input').val() == '') {
alert('Something');
}
else {
[I need to stop them!]
}
});
3) Using the Draggable, when we drag the modal, the Close button doesn’t drag together! He stays stopped (maybe the position:absolute is relative to , and not to the modal). So, how can I say that the Close button is relative to the modal box? Need I change the script?
Look, I’m learning this language (JS), and I’m using the JQuery that its a really “Hand on the wheel” (in Brazil we say this when something help us very much…), but I know that somethings is easy to do, but I don’t know how to do… Sorry for stupid questions, but I have no alternative but to ask. I even try to change myself, but mostly does not work…
Thanks for the help!
Hello Eric,
I want to put the Basic Modal Dialog more than two in one page.
Just copy and paste looks doesn’t work.
How should I do?
Thank you for a cool tool and a Happy New Year.
Pingback: yakuter » SimpleModal - jQuery Mesaj Kutusu
Hi Eric,
Is it possible to set the height of modal window to auto.
I have dynamic content coming from MySql database and I don’t know how long the text will be.
Thanx in advance
@peppetto
I used an auto height for my example/website as following:
It seems to work just fine like this, as far as I could see.
Pingback: User Experience and target="_blank" | .eduGuru
Pingback: 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine
@Caspar – I’ll take a look at your test and get back to you.
@Paulo de Tarso –
1) Shouldn’t your CSS look like
a.botaoFechar:hover { background-position:0 -21px; }2) In the onShow function, bind the button to do your validation. Then, based on your logic, when you want to close the dialog, just call
$.modal.close();3) Do you have an example I can see?
I don’t mind the questions – always glad to help when I can. As long as you don’t mind the occasional delay in my response ๐
@masa – Happy New Year to you too. What exactly are you trying to do? Is it the same content triggered from two different places, or different content? You can have as many modal dialogs per page as you like…
@peppetto – did Caspar’s suggestion help?
Hi,
I’m uising your Contact Form demo
var h = 280;
can you make this height auto.
Thanx
Hey,
Thanks for this.
I have been struggling a bit with the other dialog versions (in the UI library, and the interface plugin).
Yours look like what I need, and I like the download package that comes with all needed elements.
Hi,
How about the release multiple dialog version.Hope this will support feasibility of having multiple modals.If it would be possible to have a modal “stack”, such that one modal could overlay another.if it is possible please help me with an example code.
I am trying to add ESC as an access key to the close.
I wish it was a part of the options, but since it isnt, has anyone done this and can share?
Ok, I think I got it.
$(window).keydown(function(e){
if( e.which == 27 )
$.modal.close();
});
Hi, Eric
Actually Iโm still struggling with the matter.
I want put multiple triggers in one page, and each trigger has deferent content.
Please visit at https://www.japan-blue.com/men's.html, and click >>>.
This is very beginnerโs question, I guess. But I need your advice.
Tank you, and have a nice weekend.
Eric,
Absolutely love SimpleModal! I have incorporated into a client's custom CMS and am pleased to never have to look at a javascript alert again. I have also implemented it for ajax status displays, but have run into a really strange problem that I can't seem to solve. I can't send a link as it's on a test server, so I'll try to explain the best I can.
I have 2 different areas causing problems. One is on a drag and drop where when the item is dropped, an ajax call saves the dropped position.
Here are my modal functions:
function status() {
$.modal('<div id="throbber-container"></div>', {
onOpen: statusOpen,
close:false,
opacity: 20,
overlayId:'throbber-overlay',
onClose: statusClose
});
}
function statusOpen(throbber) {
throbber.overlay.fadeIn(200, function () {
throbber.container.fadeIn(200, function () {});
});
}
function statusClose(throbber) {
throbber.container.fadeOut(200, function () {});
throbber.overlay.fadeOut(200, function () {
$.modal.close();
});
}
And this is my callback function to display the modal:
...
callback: function(){
status(); <-- Calling the function to initiate the modal
$.ajax({
type: "GET",
url: INTERFACE_URL "/index.php",
data: 'module=Pages&method=ajax_nestPages' serializeUl($('#page-list'),'&list'),
success: function(html){
$.modal.close(); <-- Remove the modal
}
});
}
The status modal is displayed and removed as expected, but if I click any other area of the page (not even a link) the status displays for about 2 seconds and fades out again. There is no ajax call and I can't figure out why the modal is called.
The second issue uses the same modal functions, but is called on a list item change function.
Any help is greatly appreciated, on my way to donate now.
Hello,
Let me first say that I have no clue in javascrips and i’m working
on my intuition alone.
I am trying to get the ‘SimpleModalDialog’ to work for multiple ‘s
so i’ve started by changing all the id properties to class.
and then i’ve edited the basic.js to:
$(document).ready(function () {
$(“div.basicModal”).children(“a.basic”).click(function (e) {
e.preventDefault();
var body = $(this).parent().children(“div.basicModelContent”);
body.modal();
});
});
it now shows the pop-up in more then one but it dosen’t display it’s
content.
I forgot to wrap the code with the tags..
i am trying to get it to work for more then one
Pingback: AD Lookup Control with Perl and JS - Day 1 | SADev.co.za
Problems solved, learning alot! Until I have a complete understanding of AJAx and event binding, I’m thankful for liveQuery.
Keep up the great development.
Back to Edmund’s earliet question, we have a dialog that opens on top of a page and the dialog is dynamic, and it’s possible that it shows taller than the window area, thus putting some of the modal dialog below the bottom of the screen. Without scrolling (since the position is fixed) there is no way to access the lower part of the dialog. Is there a recommended way of handling this with SimpleModal, or is this scenario just unsupported? We cannot put scrollbars on the modal dialog due to design considerations, we must be able to scroll down the page but the fixed positioning prevents this.
What am I missing here?
I love SimpleModal but I have one issue that I can’t figure out. I’m using AJAX to load content into a DIV and display it as a simple modal. In order to limit the requests to the server I would like to only load the content once, but that’s when I run into trouble. Let me show you the code and then I will explain what happens.
HTML
<a href="#" class="settings">Settings</a>
<a href="#" class="test">test</a>
<div id="content">Default Text</div>
JavaScript
$(document).ready(function () {
$('#sidebar a.settings').click(function (e) {
e.preventDefault();
if (!isLoaded) {
$("#content").load("settings.htm");
isLoaded = true;
}
$("#content").modal();
});
$('#sidebar a.test').click(function (e) {
$("#content").modal();
});
});
function hideModal(){
$.modal.close();
}
The first time I click on the link ‘Settings’ the content from ‘settings.htm’ is correctly displayed as a simple modal. But each time I click on the link after that it will display the DIV’s initial text (Default Text). However, if I remove the following line;
$("#content").modal();from the event handler for the link ‘settings’ and use the ‘test’ link instead it displays correctly each time. I can’t find the reason why this wouldn’t work in the event handler for ‘settings’? I’m pretty new to jQuery so anyone can shed some light on this issue I would really appreciate it.
Hi,
i was testing modal in IE6 and it works fine, but when i try to use with these libraries (MicrosoftAjax.js and MicrosoftMvcAjax.js) the modal doesn’t work. Can you help-me?
Thank`s
Fabio
@Eric Martin: did you come around running a test with the code I supplied? I’m curious as to what you might’ve found. ๐
@Martin: a quick guess: scope issue ?
the variable isLoaded is inside the click function?
Only a small change (i have not tested this):
Settings
test
Default Text
JavaScript
$(document).ready(function () {
var isLoaded = false;
$('#sidebar a.settings').click(function (e) {
e.preventDefault();
if (!isLoaded) {
$("#content").load("settings.htm");
isLoaded = true;
}
$("#content").modal();
});
$('#sidebar a.test').click(function (e) {
$("#content").modal();
});
});
function hideModal(){
$.modal.close();
}
Caspar’s IE6 fix works. I had the same issue. the grey didn’t cover the entire screen, but only covered to where the host page content ended. I added his 2 lines of code. voila. works in IE6.
@Caspar: I missed to include the isLoaded variable in my code but it was declared as a global variable outside the click event handler. I also posted my question on the jQuery Google group which Eric replayed to. His suggestion was to use:
$(“#content”).modal({persist:true});
Which solved the problem. I appreciate all of your help and your suggestions on this issue.
– Martin
@peppetto – I’m sure it would be possible, I just haven’t tried. Why are you looking for it to be auto height?
@Danny – cool, thanks for your note. I’m glad you find SimpleModal useful!
@George – the version that I was working on that supports multiple dialogs can be found in the SVN branches. I haven’t updated it since last November, so I can’t promise anything ๐ I’m hoping to have time in the next month or two to finish the code and refactor it for jQuery 1.3.
@Danny – the following is what similar to what I had:
You’d need to make sure to undbind the event or use the one() function instead of bind().
@masa – if you only want one bind to handle multiple dialogs, you just need to find a way to pass in variables to determine which content to load. You can do this easily with id’s or a variety of other ways.
@Jay – thank you very much for your donation! Sorry for the delayed response…glad you got it working!
@Amit – sounds like your body var is not getting the correct content, or the content inside the element is hidden.
@Jason – I guess there are a couple of options (if content scrollbars are not desired). 1) Bind the ESC key or overlay click to close the dialog or 2) Change the dialog positioning from fixed to absolute.
@Martin – have you tried the persist:true option?
@fsifabio – can you let me know what is happening? Do you get JS errors?
@Caspar – not yet, sorry. I’ll see if I can today and get back to you.
@Martin – got your response in just before mine ๐ Glad that worked for you!
I’m back with another question. Is there a way you can prevent SimpleModal from centering the dialog? I know that you can use position: [top, left] but what if I don’t want to use px or % but simply display the div as a modal where it is located on the page?.
Let see if I can explain this in more detail:
If I have a DIV with the CSS “z-index:3000;postion:fixed;” but no top or left specified and I use .show() on the div it will inherit it’s position from its parent element but still be displayed on top of the other content. Is it possible to do something similar with SimpleModal or will the default location (center) always kick in? I tried to set the CSS to “postion:fixed;top:inherit;left:inherit;” but that didn’t work. I realize that this is a bit weird case but I’m trying to display a modal dialog right below the link that triggers it.
I think I actually figured out a simple solution to my problem. I can use:
var pos = $().offset();
$(‘#filter-dialog’).modal({position: [pos.top, pos.left]});
to get the position of the element. Sorry for posting before thinking things through. But I would love to hear if there is even a better way to do this.
– Martin
@Martin – sounds like a creative solution to me ๐
@Caspar, @dbonneville – adding the following CSS will fix it to:
I’ll see about adding your fix Caspar, thanks!
I have a cancel button within the modal and I’d like to close the modal without saving the data. How’s the best way to go about this? By default, though, I need to persist the data.
Thanks!
@Richard – just add the
simplemodal-closeclass to the cancel button. That will automatically trigger the modal close() function.@Eric – Thanks, but that persists the data since I need to open the modal with persists: true.
$("#modalPicker").modal({ persist: true });How can I close the modal without persisting?
Hello Eric,
Finally I made it by your advice. The result is exactly what I wanted.
Thank you again for cool & useful tool!
Hey Eric!
Here, an example working:
https://www.scherrer-net.com/modalBox_and_drag/
Look that close button doesn’t move together the Modal Box. I “ziped” the files used, if you want check them…
Thanks!
I’m running into a weird error in IE6/7. When I have a within my modal, it loads the first time fine. However, the second load throws an error.
I can’t seem to figure out why. Just to ensure it’s not my code, I made a copy of your simplemodal-test page and simply added a inside the modal container and the above behavior occurs. Any ideas?
Thanks for any insight you can provide!
Hi Eric
I have this problem on my blog with SMCF: when main window have flash (simple swf animation input by SWFObject) the modal is under the flash – flash overrides part of modal window. How could I fix it? I use simplemodal contact form 1.2.1. I saw that in the Simple Modal Version 1.2.2 the problem is fixed but I don’t understand the difference between SMCF and Simple modal… thanks
daniele
Hi,
anyone has any ideas why on IE i get two scrollbars ? Content is longer then modal, but in FF it’s ok. I’m using version SimpleModal 1.2.2
HTML code is:
CSS is :
.surveyAnswerModal { cursor:default; height:450px; display:none; overflow: auto;}
#simplemodal-overlay {background-color:#000; cursor:wait;}
#simplemodal-container {height:452px; width:600px; background-color:#fff; border:3px solid #ccc; overflow: auto;}
Js is called like this:
$('#surveyAnswers').modal({position:['10%',] });
Ok .. somehow html did not get posted:
<div id="surveyAnswers" class="surveyAnswerModal" style="display:none">
long modal content goes here
</div>
Preview how it looks in IE : https://img293.imageshack.us/img293/2686/bigscrollsfu8.jpg
Hi Eric
Excellent plugin. I just upgraded to 1.2.2 and the centering is very nice. Though sometimes it doesn’t work. It seems that the problem is related to low browser resolution and big popup. The content is not too big, I capped it at 80% of the browser resolution and added scrollbars. If I resize the window the popup will center properly. Any idea what could cause this?
Thanks
Oh yeah I have a patch that adds the ability to specify appendTo as an option. This is needed for badly coded components (not mentioning any names :)).
https://pastebin.com/f2554bc46
@Richard – One option is to add an extra parameter to the close function:
And then modify the close function:
So, if you wanted to prevent it from persisting, just call:
The above is untested, so let me know if there are any issues.
@masa – Great, glad you got it working!
@Paulo de Tarso – I solved it by adding close:false to the options and putting the following code in the #move div:
Then I just adjusted the width of p#move to 320px; Let me know if you have any problems getting that to work.
@Victor – that is really strange. Do you have some sample code or URL where I can see this problem?
@Daniele – SimpleModal is the JS library that creates the modal dialog. SMCF is the WordPress plugin that uses SimpleModal to display a contact form. If you are having problems with Flash showing through, you need to set the wmode on the Flash object (see this post for an example).
@G – it looks like the issue could be caused by having overflow:auto on .suveryAnswerModal and #simplemodal-container. I suggest setting the height of the surveyAnswerModal and taking the overflow:auto off of simplemodal-container.
@Anders Rune Jensen – thanks for letting me know, I’ll look into it. Thanks for the patch too!
Hi – is it possible to disable both the close button and esc key? How would I do that? I need one odd-ball occurrence where the user has to be gated to selected yes or no, and not escape or close…
I can tab out from the modal form & the focus is set to the other controls under the modal dialog… someone else notice this or it just me?
hmm.. 100% height to the body in the css.. why oh why do I always try to figur out the solutions? ๐
I’ll have to remember that one..
How can I programatically call the close event? Thanks!
Is it possible to have it email a different person depending on who they select? ie: i have a drop down that the user can select who to email to, and then it will email the form to who they selected.
Hi, great little plugin. However there are issues with running SimpleModal 1.2.2 on IE8 beta (RC1) and jquery 1.3 or jquery 1.3.1
I get the following message in the IE8 debug window:
Not implemented:if(i<2){s.removeExpression('height')
The code that is highlighted specifically is:
s.removeExpression('height')I know IE8 is still beta so you may not want to comment on this, however it all works fine in IE8 beta using jquery 1.2.6. Should this be raised with the fine folks at jquery?
Thanks, Keith
Just an additional piece of information regarding the IE8 beta issue: this only occurs when IE8 beta is NOT in compatibility view – that’s to say it’s in its native IE8 mode.
Ta, Keith
@Doug Bonneville – Are you using the “unreleased” version of SimpleModal or some other plugin? The released version does not have does not have the esc to close binding. You can turn off the close link with:
@Sunny – It is a feature that I have not added to SimpleModal yet. It is a major oversight for a modal dialog and I’m sorry I haven’t put it in yet. I have the necessary code, just need to get it in.
@Caspar – I usually include the following CSS on every page I create (my own “reset”):
@Sean –
$.modal.close();@Derek – it is possible with some modifications to the code. Are you using the WordPress plugin or the demo version? See this response for some ideas.
@Keith – thanks for letting me know. I haven’t recently tested with IE8 and am not sure if this issue is due to the browser or jQuery. I’ll added it to the issues list in order to monitor it as IE8 gets closer to release.
Pingback: My best 7 free JS model boxes « Tech Gossips
OK this drove me crazy, I used the sample code above to set the size programatically. (Taking the width/height out of CSS and putting in the options):
$.modal("", {
containerCss: {
height: '480',
width: '720'
}
});
FF would not center the modal until the browser was resized. Then I changed the width and height to be numbers, not strings, and it worked great. Why do you have the sample code with strings if that does not work???
Mark
This works great, but I need the size of this iframe modal to be set at runtime, so I took the width/height of the CSS and put it in the options of the $.modal() call. in FF the window the right size but not centered unless the browser is resized. it works fine in IE. Any ideas how to get it working in FF? Thanks.
Mark
@Mark Melville – “Why do you have the sample code with strings if that does not work???”
Just to irritate you ๐ Actually, it was a typo, thanks for letting me know.
“Any ideas how to get it working in FF?”
Can you send me some sample code or a link to the problem page?
I have read the posts and have found similar issues, but not one like this exactly, and I’m kind of stuck. I am getting an issue in IE7 that seems fixable. My modal pops up fine, everything looks good. I have a button that causes the page to expand, the page adds an upload (file) field for every option selected. If you select 10 items in the select box – 10 file inputs will be added inside the modal causing the page to grow by about 10 times . The issue is that it doesn’t seem to redraw the scroll bars for the modal with a bigger height. Once you add enough file fields, the scroll bars no longer let you scroll all the way to bottom. What I need is a chunk of code that would redraw/recalculate the scroll bars in the modalContainer – I’d add it to the onselect/onclick or something so whent they select an option, the scrollbars will redraw. Any ideas?
Hi, very nice plugin!
I would like to know how to make users to close the modal window by clicking the shadowed zone.
Juan
Taking the quotes off was all that was needed to fix it for me. The last paragraph in my post was written before I figured it out and I didn’t realize it was still in there. Sorry. Hey, it was irritating, but it was worth the time to figure it our because SimpleModal is quite amazing.
Hi Eric,
The “divModal” doesn’t appear over the content. It’s displayed at content’s bottom.
I removed my custom css to ensure that’s not specific case.
Thanks, Fabio
Pingback: Httpcode - ASP.NET Control Toolkit โ JQuery Equivalents
@Eric Jasinski – if you put the CSS
overflow:autoon your content div, would that fix the issue?@Juan – you can use the
onShowcallback to do it. Something like this should work:@Mark Melville – cool – glad you got it working!
@fsifabio – I believe the issue is being caused by an external JS file adding the XMLHttpRequest property to the global window object (which should not exist in IE6). Try opening SimpleModal and changing:
To:
Let me know how that works.
Hi Eric ,
Thanks for that wonderful modal but what I’m asking as I’m a newbie in jQuery
how can I use simplemodal plugin with jAlert plugin i.e adding modal effect to jAlert ?
Hi Eric,
Excellent Stuff…!!! I just want to know how I can bind any jQuery Calander with one of the text box present in the Modal Pop-Up ?? (say we have a Date of Birth input field in the Contact Form.)
Hi Eric,
This is very cool code – thanks. I am trying to display the contents of a text file in the modal, and can’t get the text to appear – the modal box appears with nothing in it. Here is my code:
$(‘a#test5′).click(function (e) {
$.get(“test.txt”), function(data) {
$.(data).modal({
close:true,
title:’Test Modal’
});
});
});
The file test.txt has a few lines in it, but can’t get that to appear. There are no js or php errors. Can you see what I am doing wrong? Thanks!
@Mina – I’m not sure that I follow. What exactly are you wanting to do? If you just want jAlert to have an overlay, I’d look more at what they have to see if that is possible.
@Amin Sayed – typically anything like that would be done in the onShow callback. Example:
@Kathy S – it may be because of the way jQuery parses the response. Try wrapping it in a div, for example:
Hi Eric,
Excellent it works perfectly now!
Thank you very much!
Fabio
hi
i am having problems in ie6. when the modal dialog appears, all the select boxes on my page disappear. The dialog is small and does not sit over these select boxes and therefore i don’t want them to disappear. how can i prevent this behaviour?
thanks
michelle
Hi Eric,
Thx for this nice plugin !
Maybe juste one option is missing to deal with a smaller browser viewport than modal dialog => if (viewportHeight < modalHeight) modalHeight = viewportHeight, same for width, onOpen and on viewport resize.
Or maybe I’ve missed something ๐
Thanks
Hi,
Thanks for a great plugin! I have the following problem (tried to wade through the posts above, sorry if I am missing something):
I am using simplemodal to show a modal with a rather large height. It fits fine in usual screen resolutions, but if someone has a few browser toolbars, large browser buttons, 640×480, etc., the bottom of the modal content may get clipped. And since the modal is ‘position: fixed’, there is no way to scroll the clipped content into view, the modal just scrolls with the page.
So, does simplemodal require ‘position: fixed’? I went ahead and tried changing the 3 instances of ‘fixed’ in jquery.simplemodal.js to ‘absolute’, and this allows a user to scroll down to see the clipped content in Firefox, but not IE.
Sounds like there is a function that simulates the ‘fixed’ behavior in IE? I’m a newbie, so not sure how to remove it safely or otherwise allow scrolling of the entire modal in IE.
Any help much appreciated.
Thanks,
Patrick
Great plug-in! I have a problem in IE7, where if I use jQuery UI tabs, the opacity is 100%, no matter the opacity setting. If I remove the tabs, the opacity is fine. Any help would be great.
Hi,
is there almost a solution regarding the problem with the autoheight?
I have dynamic content so I can’t define a fix height.
I have seen that there were several people asking about this problem …
Thanks and all the best,
Peter.
Is there a way to prevent scrolling, globally? I have a slider opening up in the modal dialogue. In IE6, when you pick the element that slide, the page behind the faded modal dialogue slides with it. In FF, it just stays put as you’d expect.
So, is there a way to “double” lockdown the users ability to scroll?
Doug
Hi! Thanks for developing such an useful plugin.
I’ve got one doubt. I use the “onOpen” callback to animate the dialog opening, something similar to “simplemodal contact”. I also need to use “onShow” callback, but I noticed the function gets called before the opening animation is finished. I put a $(…).append(“Hey”) for testing in the show callback and the text is written in the document almost immediatly after I click the link that opens the dialog.
Am I doing something wrong here? Thanks in advance!
Hi
Can’t seem to find this bug on here anywhere but form dropdown boxes show through in IE6?
Is there any fix for this? Thanks…
Simon
Hi Eric
Thanks for this great plugin.
I’m having trouble getting it work with ASP.NET UpdatePanels. I have an UpdatePanel inside the modal div, and various form elements inside the UpdatePanel including a submit button.
When the modal div is displayed the UpdatePanel is updated and the form elements are filled using data retrieved from the database. The idea is that users can change the data in the form elements and then click the submit button to update the database. However, the submit button does not fire when it is clicked. This seems to be the case in Firefox 3, IE 7 and 6 (I haven’t tested in other browsers).
I’ve tried calling “__doPostBack(‘buttonID’, ”)” when the button is clicked. This seems to work to generate a server callback, but the form values are not maintained – ie. the server thinks the form values are empty even though they were filled when the modal div was displayed.
Do you know how I can get this working with ASP.NET UpdatePanels? Apologies if I am missing something obvious.
Many thanks
Elliot
Hi Eric, great plugin! I have it working well except for it not automatically centering itself. I have left out the position settings like suggested in the documentation, but it is positioning itself at the bottom left of the page in all browsers.
Any ideas?
Hi, I’m trying to create a Save/Cancel senario. I got it to the point that both links close the window…but they both call the same close callback function. I need to put my save routine in the close callback function. Cancel should just close the dialog. How do I tell the close callback to skip the save logic if the Cancel button is clicked?
Thanks!
Ron
Sorry all for the delayed responses!
@michelle – It is being caused by the iframe that is added by SimpleModal to prevent form object from bleeding through the dialog. In other words, what you are seeing is the intended behavior. For a modal dialog, typically you would not want the user to be able to interact with the parent page. You could edit the code to prevent the iframe from being created or have it be the same size and position as the container.
@Seb – that is a good suggestion. It is on my list of things to address.
@Patrick – if you don’t use the fixed position, a user could scroll the dialog out of view. The reason changing it to absolute doesn’t work in IE is because SimpleModal addresses IE separately. There are 2 ways that I would suggest working around this issue… 1) prevent the dialog from being larger than the viewport or 2) allow the user to click on the overlay or press ESC to close the dialog. There are examples of how to do 2 on this page (in the comments) and 1 is something that I need to add.
@Aaron – That is strange. I’m not sure what would cause that…maybe a z-index issue? Do you have a sample page I can view?
@Peter – That is something that I need to add – or show others how to do in a callback. Off the top of my head, you could try something like (untested):
Let me know if that helps any.
@Doug – well…I once created something that completely prevented the user from scrolling…but it wasn’t pretty and I don’t know if I have that code anywhere. ๐
@XCarlos – There are a number of ways you could work around this…the easiest would be to place those changes in your onOpen function after the animation effects are finished.
@Simon – That shouldn’t happen. Do you have a sample page I can view?
@Elliot – See if the following thread helps you any. I’ll be adding an option in the next version for where to append the dialog.
https://stackoverflow.com/questions/29174/simplemodal-breaks-aspnet-postbacks
@John Mc – That’s strange – sounds like you may have some CSS somewhere that is affecting the positioning? Have you checked Firebug to see if that is the case? Do you have a sample page I can view?
@Ron – I think you should change your implementation. Have the Cancel close the dialog but bind the Save in the
onShowcallback and handle the logic there. When that logic is done, just call$.modal.close();. Let me know if you have any other questions.Whew…going to bed now ๐
Pingback: Web Pickz » Blog Archive » 75 Useful JavaScript Techniques
Awesome plugin! I’ve used this on 2 projects in the last month. Thanks for your work on this.
I did find one bug and have one recommendation:
In IE7, when viewing a page in standards mode, it appears to still be running the fixIE function. The simpalmodal-overlay receives a position of absolute. I’m using version 1.2.2. Not sure why this is happening.
Also, my site’s CSS sets the body’s width to 960px (centered). So when the fixIE function runs, document.body.clientWidth and document.body.scrollWidth return a width of 960px for the overlay, when it needs to receive the width of the browser window. The overlay will also be positioned absolutley within that 960px centered width. As a temporary fix, I’ll be setting the body’s width to 100%, and adding a container DIV to restrict the width of the site to 960px.
@Jeremy – the new version (1.2.3) should fix the IE issue. I’ll add an issue for the CSS problem – thanks for reporting it.
Hi Eric,
I’m building my very 1st site, so sorry if this is the most stupid question you ever had. I managed to install the simplyModal and it all works great, thanks for sharing it but when it comes to doing the animation on open and animate on close I dont know where to write the function or where to write the callback. Would you mind pointing me in the right direction.
Thanks
@Gregg – I suggest checking out the demos and tests (links at top of page). Both have examples of using the different callbacks. Email me if you have any particular questions.
Hi Eric, i did check there and I checked the source codes but i couldnt see where they are written.
Like i have this code
/*** When the open event is called, this function will be used to 'open'
* the overlay, container and data portions of the modal dialog.
*
* onOpen callbacks need to handle 'opening' the overlay, container
* and data.
*/
function modalOpen (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.fadeIn('slow', function () {
dialog.data.hide().slideDown('slow');
});
});
}
and i have
$('#modalContentTest').modal({onClose: simplemodal-close});
But in what file do i put them in? Do they go in the html document where i have the modal display, or do i put them in the file basic.js, jquery.js etc. i tried lost of different ways but couldnt get it to work
Sorry to be so thick but this is all new to me. hehe
@Gregg – You should put the modalOpen function in basic.js and change your modal call to:
Hi:
First off this is a great script, keep up the awesome job.
Secondly, I’m having trouble submitting a form, after user confirms their selection.
In the confirm.js file, I changed the code a bit from :
window.location.href = 'somepage.html';to
document.LsForm.submit();however that didn’t work.
It seemed like someone had a similar problem on this page, but there was no replies to him/her.
Could you help please?
thanks
Sorry for double comments; now that my first comment finally worked:
I noticed in the confirm page that the webpage gets redirected, however I need the form that is using this script to be submitted
I tried and changed the
window.location.hrefto
document.LsForm.submit()but it didn’t work.
Can you hel p please?
thanks
Sorry, i didnt realise i sent you the wrong function there, I just copied and pasted from the test page. Where do i put the call? does that go in the html doc? beacsue i dont see it in the source code in the test pages.
Thanks
its ok i figured it out, I added it to the function already in the basic.js. Thanks for your help Eric
Hi Eric,
I just found an issue with SimpleModal when using jQuery > 1.2.6. Everything works fine in Firefox 3 and IE7, but in Opera (9.25) and Safari (3.0.4) the modal overlay is displayed incorrectly. The overlay only covers part of the document (body?) but not the entire page. Also, the opacity fails in Opera.
To make sure it wasn’t just my code I downloaded the “Basic Modal Dialog” from your demo page and tried it with different versions of jQuery and I was able to reproduce the same issue using your demo code.
I don’t know if you already are aware of this issue, but I thought I should let you know.
– Martin
Eric,
I’m using your basic modal. Is there any way to preserve the modal’s current state when closed and reopened?
For example, I added a text input to my modal. When I click my ‘Open Modal’ link, the modal opens. I then type text in the text input. Next, I close the modal. Finally, I reopen the modal and the text is gone..
Thanks
@Richard,
I think you want to use the option “persist”.
Example:
$(“#content”).modal({persist:true});
If you search for “persist” on this page you can find more handy discussions/information regarding this option.
– Martin
Martin,
Thank you very much. :)))
Saw the new release. Cool stuff! I upgraded and checked if this was fixed:
“I just upgraded to 1.2.2 and the centering is very nice. Though sometimes it doesnโt work. It seems that the problem is related to low browser resolution and big popup. The content is not too big, I capped it at 80% of the browser resolution and added scrollbars. If I resize the window the popup will center properly.”
Sadly it still seems to be there. Browser is firefox 3.0.7.
@Kamy – not 100% sure what you are trying to do, but with jQuery, you can do something like:
You’d want to put the id of the form (#formId) or probably some other qualifier in place of form, as that would submit every form on your page.
@Gregg – glad you got it working.
@Martin – It appears that there are a number of issues in jQuery with $(window).height in certain version of Opera and Safari. I’ve filed bugs for these issues and will work on a workaround. Thanks for letting me know!
@Anders Rune Jensen – doh! Sorry about that. I’ll create and issue so I don’t forget it. Thanks for the reminder!
Eric,
First of all I have to say: great plugin!
I noticed that there are issues when there is a video/flash in the main page: it does not go behind the new layer.
This happens when the old(?) “object” – “embed” code is used. When using the AC_FL_RunContent function they seem to work ok – at least the flash that i checked.
Now, playing around a bit I came up with the following thingie:
// create the overlay
this.dialog.overlay = $('')
.attr('id', this.opts.overlayId)
.addClass('simplemodal-overlay')
.css($.extend(this.opts.overlayCss, {
display: 'none',
opacity: this.opts.opacity / 100,
height: w[0],
width: w[1],
position: 'fixed',
left: 0,
top: 0,
overflow: 'auto',
zIndex: this.opts.zIndex + 1
}))
.appendTo('body');
The only thing different from your code is the “overflow: ‘auto'” which somehow(?) hides all the videos/flash when the new layer opens.
Unfortunately though (now that I tested a bit more), it does not fix the issue in Chrome, Safari and Opera… It fixes the issue in IE, FF. (i’m keeping this info in the post as it might give you a hint for a fix!)
For this reason, i thought of manually hiding the videos/flash. But since it is a more complicated solution, I wanted to ask you first what do you think about this issue and if you would like to have a look and perhaps provide another more “script-friendly” and global solution!
It is a quite common issue, so any help is very very much appreciated!
…back with more requests ๐
how about allowing more than one layers?
i.e. when having a layer already, having in there content that triggers another layer above the current..
Thanks Eric! ๐
@Ben – the flash issue is something that can only be reliably solved with a change in the way the flash is embedded into the site. A solution is listed under “Know Issues” in the Other Notes section above.
As for your second request – I created a version that does that, but never released it. It was a complete rewrite and I just have never gotten back to it. So, we’ll see, maybe in the future ๐
doh! I should have tried that – it just did not come to my mind! …and I should have checked the known issues, yes. thanx.
I also came across the problem others did when I removed the dimensions of the container in order my items to use only the necessary space when loaded. They load ok, with the correct size. unfortunately though, they are not positioned correctly.
$('a#test3').click(function (e) {
e.preventDefault();
$('New DOM Element').modal();
});
In the above example (from your examples), the modal that comes up is not positioned correctly: the top left of the modal is positioned in the center.
I checked and jQuery returns 0 when trying to view any of the height/width that you have used below (and that explains the positioning):
var top, left,
hCenter = (w[0]/2) - ((this.dialog.container.height() || this.dialog.data.height())/2),
vCenter = (w[1]/2) - ((this.dialog.container.width() || this.dialog.data.width())/2);
if the window is resized the modal gets positioned correctly (as others have said).
Great plugin! Thank you for it.
Question 1 — how do I make the Modal pop up automatically when the page loads? My visitors need to be able to sort themselves according to geography, which I am using an imagemapped jpeg of the US for… but that jpeg is what I want within the modal… which leads me to:
Question 2: How do I write a link within the modal that both closes the modal AND redirects the parent page to a new URL?
I’m pretty ignorant about coding, but am learning day-by-day on how to hack it together. Thanks again for this outstanding code! ๐
Hi Eric, great plug-in for a modal box. I am a JS novice and have a question.
I am trying to implement a Form that a visitor has to fill to download a PDF. I like the Contact Form demo in your example.
How can I make it so that the visitor can Submit and it will automatically trigger a download upon successful submission?
I am not able to add close properties on the button/image when the data for modal is coming through ajax. any help will be appreciated…
thanks in advance..
PS: tried this https://docs.jquery.com/Tutorials:AJAX_and_Events .. but solved only some of my problems. the above problem still persistes..
It’s always difficult when you do a release for client testing only to realize that IE6 won’t display the modal dialog box properly. That just happened to me, but then I checked this website, realized I was 0.0.1 version out of date, upgraded, and it worked. Crisis averted.
Thank you for the great work.
Solved the above stated problem.
This solution is for anyone who want to do the ajax way:
You can read the details from here : https://docs.jquery.com/Tutorials:AJAX_and_Events
$(document).ready(function(){
$('body').click(function(event) {
if ($(event.target).is('img#customize_indQ,a.customize_indQ')) {
// $('img#customize_indQ,a.customize_indQ').click(function (e) {
event.preventDefault();
var modal_Q = $('#modal_indQ').modal({onOpen: modalOpen,onClose: modalClose,persist: true});
/* $().bind('click.simplemodal', function (e) {
e.preventDefault();
modal_Q.close();
}); */
// });
}
if ($(event.target).is('.simplemodal-close')) {
event.preventDefault();
$.modal.close();
}
});
});
If this can be further optimized. please do tell me.
This module was a great help. I would like to contribute to this
@Ben – thanks. I’ll make sure to get the positioning issue fixed in the next release.
@Brandon – 1) you can just call the modal when the DOM is ready:
2) Assuming you have a link in your modal content with a class of
close, something like this should work (untested):@Raj – There are a number of ways you could do this. My suggestion would be to have the form submit and return the URL for the download. Then use that url for the window.location or to display a link to the user.
@Aby – if you use the
simplemodal-closeclass, the close will automatically be bound to those elements. However, if you are adding your own close binding, it has to be done in theonOpenoronShowcallback.@Timothy Jordan – sorry for the near crisis…glad you got it resolved ๐ I really wish IE6 would go away!
Great plugin!!
For the ASP.NET folks that have problems getting their postbacks to work. i have written a small tutorial here
I am having an issue in Opera that occurs when you click close.
I was pulling my hair out trying to work out why your demos worked in Opera and why mine didn’t. Then I noticed that if the modal div sits lower than the content it is covering and the close button is clicked part of the modal div and the overlay is still visible. This didn’t happen with your demo page (https://www.ericmmartin.com/simplemodal-test/) as the content always site lower vertically than the modal div.
There may be a quick work around and this issue may have been raised before but you may want to take a look.
Tyrone
Hey Eric,
Is it possible to have variable sized divs, ie. ones with only a max-width and max-height defined (as opposed to height and width) and still have them centred in the middle of the page? I’m using the plugin for a number of modal popups with different sizes on the same page.
Whenever I replace the width and height CSS properties with max-height/max-width the centring doesn’t work anymore.
Lenni
Thanks erik, iยดm trying to do some localization in spanish for a small project, when I type a wrong email like: xxx it shows Email is invalid, where to change this? And when I decide to clear the form, it shows Goodbye. Itยดs not in the php file isnยดt it? demo.
Great script.
Hi Eric this is an update to the question i posted on March 20th. Here is a screen shot of what i was talking about: https://dev.v-pure.com:8181/test/modalissues.html
Hopefully this explains things better!
Thank you,
Tyrone
Great one. One issue though.
How can have the container of position “absolute” rather than “fixed”? I try to override it with the external css and with the containerCss (as $(‘#formAddMatter’).modal({position: [‘230px’,’500px’],containerCss: {position:’absolute’}});), but both did not work ๐
Hello again,
I was trying to load a flash movie into a modal, and noticed that whenever the “AC_FL_RunContent” function (https://www.adobe.com/devnet/activecontent/articles/devletter.html) was used, the content of the page gets lost; only the flash appears and the rest of the page keeps loading forever.
When using the exact same page without that function for flash elements, the modal and the flash appear ok.
Thanx.
Hello,
I try to open a modal window from a google map. It was ok in safari firefox IE7 but not in IE8.
... google code ...
GEvent.addListener(marker,"click",function(){
$('').modal();
});
Any idea ?
Thank you.
Sorry
GEvent.addListener(marker,"click",function(){
$('<iframe style="width:800px;height:550px" src="../template/map.php?from='+address+'"></iframe>').modal();
});
I found my own answer, itยดs all in the contact.js file. Sorry for such a basic question.
I really want to use your plugin, but Im struggling to get the overlay to fill the page in ie 6 when the content is less than the width and height of the page. The right side of the pages has about a half an inch of white when the dialog pops up. The bottom allows a little bit of a scroll, but then the overlay stops and the rest is white. It works fine in Firefox (I haven’t tested IE 7 yet). Is there any way you could add this bug to your list of fixes? I appreciate your hard work. If you email me or tell me where I can upload some sample code, I can upload an html document that demonstrates my issue. I had hoped it was fixed with the 1.2.3 version I saw you released, but the issue is the same. Thanks in advance!
Your plugin is excellent and I am currently using it my website.
I have just come across one major problem. I cannot get an to postback when I click on ‘Yes’ from a modal confirmation dialog. I am using jQuery v1.3.2 and Simplemodal v1.2.3.
Go to https://javiercrespoalvez.com/2008/12/aspnet-confirmation-button-using-jquery.html for an excellent sample of a custom confirmation button using simplemodal, which WORKS when using an older version of jQuery and simplemodal. It seems to me that either your new version of simplemodal is flawed or jQuery is the one with the problem.
I am reluctant to use older libraries just for the sake of getting modal confirmations to work properly using asp button server controls.
Hope you can help? Thanks in advance!
Update to my last post!
I have done some further tests and it seems that Simplemodal v1.2.3 does not work with jQuery v1.3.2. I have not tested it with jQuery v1.3 and v1.3.1.
Hey Eric,
I’ve come across an issue where I’d like to replace the html inside the modal container following an event inside the original container html. When I attempt a simple replace of the html inside the container using the jquery html() method, The html is replaced. However, it is “covered” by the overlay. How can I perform a simple html replace with the new html still appearing in the “foreground”?
Thanks in advance…
@Wout – thanks! In the next version, I will provide an option for where to append the elements. ASP.NET users can use form as the option instead of body.
@Tyrone – thanks for letting me know. I actually tried to get around some of Opera’s screen “painting” issues – but there were still some that I wasn’t sure how to fix. I’ll add it to the issues list and look into it further.
@Lenni – can you send me some specific examples of what you are trying to do. I need to play around some with dimensions and positioning.
@alvaro – All of that text should be in contact.js. Ah – you got it ๐
@Jeremy Chone – the fixed positioning is hard-coded in SimpleModal – mainly because I didn’t see why you would want to be able to scroll the modal. But with screen size issues, I could see the need (perhaps you have a different reason). To make it absolute, you’ll have to modify the source.
@Ben – Do you have a sample page I can see this issue on?
@bvde – What is the error/problem? Do you have a sample page I can see this issue on?
@lance – have you tried adding CSS
body {width:100%; height:100%;}to your page? Either way, I thought I had tested that scenario – I’ll look again.@Mike – It sounds like maybe there is something in your code causing an issue. I’ve tested SimpleModal 1.2.3 with jQuery 1.3.2 and haven’t had any issues. You may be having an issue where SimpleModal elements need to be appended to the form and not the body?
@AronZvi – Without seeing an example, I can only guess…but did you make sure that you are accessing the element inside the modal? If you are not using one of the callbacks, you should make sure you are doing something like:
Thanks for the response. I tried body {width:100%; height:100%;} and it stretched it out to fill the screen, but put horizontal and vertical scroll bars in. When I scroll right or left, or up or down, it doesn’t scroll far before it ends and has the little bit of white showing on the far right and on the bottom piece. Maybe something else is going on. Essentially all I did was download the project from https://beckelman.net/post/2008/12/07/Modal-Delete-Confirmation-V3-Using-SimpleModal-jQuery-Plugin-Demo.aspx to get a better feel for jquery/simplemodal and run it (it is just a pure html doc). Works fine in firefox, but the overlay has issues in ie6. Let me know what you think the issue is and thanks for the great support and plugin!
I am using the slightly older version of simplemodal (will upgrade soon but it’s in so many places its going to take weeks to change over!) however, it doesn’t work in IE8, will the upgrade solve this issue?
Thanks,
Hello Eric,
in the link below you will find an example demonstrating the issue with the “AC_FL_RunContent” function. Update: the issue does NOT appear in IE (at least 8 that i tried) – it does in Firefox and Chrome.
link.
Please let me know what you have found.
Hello Eric,
my english not is good, my question is: howto open are modal another modal.
Thank You Eric.
Thank you for your work
I have some questions or suggestions
1- why doesn’t the script count width and height automatically?
2- why the modal does not close current displayed modal instead of discarding it?
3- why do you create an iframe to hide select in IE instead of hiding the select menu?
Hello Eric,
is there any progress on that positioning issue (new dom without specifying width/height in the container)?
when should we expect the new version to be available?
Thank you very much!
Hi,
I have a problem with Opera 9.25 build 8827. I use doctype HTML 4.01 Transitional. After calling $(el).modal() I see only overlay, the modal is not visible and browser notably slow down when scrolling. I tried to define z-index property for #simplemodal-overlay and #simplemodal-container but that didn’t help. Will appreciate for any idea.
Hi there. I am new to jQuery so forgive if it is a stupid question : )
I am using the contact demo and I want to have a small image/link in a repeating order list that passes the Order ID to the contact.js function ( that calls the form )
How do I pass values to the contact.js function using the demo? Or, how do I pass name value pairs?
TIA,
Dave
Hi Eric, thanx for this great plug-in for a modal box.
I’m a JS novice and have the same problem like David above… I have one tab and when I cliked in one line I want pass one value to the form load in the model box, but it don’t work… how can i do ?
$(document).ready(function () {$('#tab tr').click(function (e) {
e.preventDefault();
var pos = {id: $('#tab tr:first').text()};
$.get("top.php", pos, function(data){
$(data).modal({ etc....
Thank You for this plug in, it’s working perfectly for me ๐
I have one question though,can You provide some example,that i can use to implement simple login form instead of default one.
Thanks in advance
Hi Eric!
First of all.. sorry about my english :S (or “spanglish” xD).
I was very happy using your plugin with no problem until I wanted to use the options “onOpen” and “onClose” I can only click one time on a link. Once you click on it you can not re-open any other link (with Firebug I see that the content loads, but does not show me the modalbox).
Maybe because I am using javascript functions instead of jQuery events?
Could it be because I’m using Javascript functions
Here you can see:
https://breaknest.skoreasound.com/v2/netlabel.php
(the code is in that page)
Thanks for your help! And for the plugin, of course ๐
Hi Eric,
I see that a number of people have figured out how to put scroll bars into the modal window to fit long content, but I can’t find what the actual solution is. When you have a minute can you throw me a bone?
T Vainisi
@lance – that is strange. I tried removing the padding from body{} but that still left a gap at the bottom. I’m not really sure what to say other than it must be something with the site code, because all of the tests and demos work fine with IE6.
@Jason – I believe that the latest update resolved any IE8 issues – let me know if you are still having issues.
@Ben – I think it is an issue with how the AC_FL_RunContent function works. I’m going to try and get some work done on SimpleModal this week, so hopefully soon.
@Miguel – Are you asking if it is possible to open multiple modals? If so, the answer is no ๐
@Waleed GadElKareem –
1) Height/width of the content? Mainly because I wanted it to be up to the developer to determine and not the content. What if the content is 1000x1000px? Then SimpleModal would need a max height/width, etc. Something to consider adding, I guess.
2) Not sure what you mean?
3) Good question. Just easier, I guess.
@kosh – sounds like a positioning issue. Do you have a sample or link?
@David – you can make the orderid part of the element ID and use that to pass to the contact.js script.
@Allex Teixeira – I’d need to see more of what you are trying to do. You can email me, if you like.
@georgeA – I don’t have an example, but it should be fairly straight forward.
@El Boletaire – Hmm…can you put up a version of SimpleModal that is not packed, so I can debug through it.
@T Vainisi – add overflow:auto to the element you are putting in the modal dialog.
Hi Eric, I am working on a Web site and I am having an issue with Simple Modal on IE. I am using two jQuery modal plugins on a page. One to show a photo gallery and one to show a video. The gallery plugin is lightbox (https://leandrovieira.com/projects/jquery/lightbox/) and the video modal is Simple Modal.
The issue is that on IE if the user clicks on the gallery images first and after that the video link is clicked, to open the video in simple modal, there is a Javascript error and the simple modal never opens. There is no issue on FireFox, or if the video link is clicked first. Could you help with this problem?
Here is the website. In IE click on the gallery image first. After closing the modal click on one of the video links.
https://www.carplanet.com/detail-1959bugeyewht-org.html
Thanks!
Done!
Thanks again for your help & time ๐
https://breaknest.skoreasound.com/v2/netlabel.php
Hi Eric, thanks for great plugin.
I need help with displaying simpeModal
on top of iFrame with PDF. The problem is that part of
SimpleDialog intersecting with iFrame(with PDF) is going behind
iFrame. How can i fix this?
thanks in advance
wasan
Hi Eric,
First of all great job! I’m using this code in several of my projects. However recently I upgraded from jquery version 1.2.6 to 1.3.2 and unfortunately this broke the postbacks for ASP.NET projects as stated earlier by Mike (and some others).
I tried the suggested solution of changing your js code from ‘appendTo(“body”)’ to ‘appendTo(“form”)’ but that seems not to be the problem.
I’ve created a test project and used your (unmodified) code and ran the project with both versions of jquery. Using jquery v1.2.6 is causing no problems at all, but when I switch to v1.3.2 the postback won’t occur anymore. The only change between these runs are the versions of jquery used. I’ve also tested all other versions of your simplemodal code (i.e. v 1.1.1 & 1.2.1) and they all seem to behave the same. They will all post back in v1.2.6 and not in v1.3.2.
Thnx Kevin.
NB I’m happy to sent you I small test project so you can review it, just email me and Iโll sent you a zipped ASP.NET appโฆ
are nested modals supported yet? i’m using this great plugin and really need that feature
Hi Eric, I sent you a message earlier in the week regarding a conflict between lightbox plugin and the simpleModal plugin on IE, if the lightbox is used first. I need to send you a new url for you to check the issue on. Check the url below on IE7. First click on the photos and after closing that modal click on the video links. SimpleModal gives a javascript error and modal doesn’t open to display the video.
https://www.carplanet.com/detail-1969duetto-org.html
Thanks very much for a great plugin and you help. -Ladan
OK, so I’ve got a div I’m using for my modal dialog, and I do the following on postback:
Dim csm As ClientScriptManager = Page.ClientScript
Dim script As New StringBuilder
script.Append("$('#pnlLoadFinished').modal();")
csm.RegisterStartupScript(Page.GetType(), "modal", script.ToString, True)
It works fine in FF, but in IE I get:
Internet explorer cannot open the Internet site: blah blah
Operation Aborted
—– It then gives me an “Internet Explorer cannot display the webpage” error. Thoughts? FYI, using JQ 1.3.2 and SM 1.2.3. Perhaps it’s a callback issue?
Ah…when injecting the javascript from a postback, make sure you wrap it in document.ready()!! I KNEW that, but thought I was using a shorthand form of it.
Whatever, I got it working. Hooray! Now to try and get postbacks back.
Question 1 โ how do I make the Modal pop up automatically when the page loads?$(document).ready(function () {$(element).modal({options});
});
Which must be added the code to be executed when you open the page?
I have a problem with file upload in IE. Sometimes when I submit my form in the madal dialog with only one element(file), the input clears and form doesn’t submits.
hi Eric,
I want to attach the modalbox from the databound event of the gridview.
But it does’nt seem to be working.
Any suggestion?
Thanks
Pragnesh
I just stumbled on this project and really like what I’m seeing!
Quick question: Is there anyway to load the content into the modal when it opens? I’m looking at using it for a terms and conditions and don’t want to have the overhead every time a page loads. Ideally it would just grab it off our server when they open the modal window.
Thanks, looks great.
@Ladan – While viewing in Firebug, I see that the lightbox plugin is adding a visibility attribute to each object in the page. For each of your modal calls, try adding the removeAttr function to see if it fixes the issue:
@wasan – do you have some sample code or site I can see?
@Kevin – If you can send me your test project, I’ll take a look. I’ve been finding a lot of issues with 1.3.2, unfortunately.
@brad – I’m getting ready to release 1.3 beta and still have not added nested modals. I’ve been leaning towards not adding this feature, but will reconsider.
@nathaniel – It could be a jQuery 1.3.2 issue – have you tried any earlier version of jQuery? Oh – I see that you got it resolved…nevermind ๐
@Ortubes – yes, that is how you would do it.
@Snowcore – what event are you binding to the form? I’ve seen issues with one form element and using the click function vs the submit function.
@Pragnesh – Do you have a code sample or link? What version of jQuery are you using?
@WeBoat – the easiest thing to do is do an Ajax call then load the response in a modal dialog. Example:
Eric,
i just tested a sample page in an IE6 (#&$%^@) and noticed that if the page is shorter than the viewport (e.g. height is 600px while viewport is 1024px) then the overlay covers only as far as the page extends, and not the whole viewport!
thanx (again and again ๐ )
How can make the modal being in self-closing after a period of time(for example 5 seconds)
?
Thanks for the great plugin!
I’ve modified the contact form to include additional fields, and have been sucessfull in doing so. But my latest addition was to include a attachment file upload. I have been unsuccessful in pulling any $_FILE attributes into smcf_data.php for manipulation. Can anyone point me to what I’m missing?
Thanks!!
Sorry, (after reading tons more comments,) I just wanted to add that I did include enctype=”multipart/form-data” to the form tag. If I drop either the button or the send class info (class=’smcf-button smcf-send’) then the $_FILE array is populated, but obviously not displayed in SimpleModal…
Again, Thanks!!
Does anyone have any examples/success on how to embed a video object in the modal form? I am actually looking to place it in the form with the other contact fields.
Hi there, is it just me, or that’s how this modal window works…
After successful mail sent message, the window stays open with Thank You displayed, until i press close button.
If this is normal behavior, how can i change it to automatically close the window? But if is not, what am i doing wrong? btw. using jquery 1.3.2.
Thanks
Hello I currently use tinyMCE in my form. However when combined with simplemodal, the textarea is locked and cannot be edited. It does not even show the default text.
Anyone know how to fix this problem?
All sample with trigger button, how to show confirm without button?
Hello Eric,
First of all i want to thank you for this great tool, it is very usefull.
I added some more fields to the contact form and works fine, but i need to add a file input field to upload a file to the server, but i cant get the value of the $_FILES[‘file’][‘name’], im using a traditional form (not AJAX).
Can you give me a clue of how can i get the value of that variable?
Thank You
Hello again
I want to use simplemodal to show a google map inside of it, actually i did it but doesnt show the whole map, just a part of it. And in IE 8 the map controls doesnt work properly.
Do you have any experience on that?
Thank you
Great work! This saved me alot of time. I’m wondering if there is a fix to the centering issue already mentioned a couple of times? I find it to appear for IE8, FF, and Safari.
Thanks
Pingback: 70 tรฉcnicas JavaScript profesionales + tutoriales avanzados. | Webizzima
i need start the modal when initiating a connection to data base and close automatically the modal when the connection it’s ok.
i.e: press connection -> view modal -> go to data base -> get data -> close modal.
is there a way to not lose the scroll position of the window when showing the modal?
Is there a way to make a button in a Flash movie and call the function for the modal. I know how to call a Javascript function from Flash using AS3 and have made a simple Javascript pop up to another window but I need something like a modal instead of a simple pop up window. With jQModalplugin it requires the HTML link to have a class. Which is nearly impossible with a Flash movie. Is this the same for SimpleModal or can I just call the function from Flash without a class for the link and it will work.
Eric, if you could email me with a solution or idea I would really appreciate it.
If you can actually do the Flash movie thing and have a the modal pop up from the Flash movie button that would be a huge break through and I will tout your product all over the web as the modal to use.
Thanks in advance.
I’m sure there is an easy way to do this, but how do I use images for the border around the modal that pops up instead of any existing default border? Like, if I want to use a fuzzy shadow border all around that is created by different image files. Thanks!
I do the trick to use appendTo(‘form’) instead of body because i’m working on a page in asp.net. It’s working but my page use Ajax and instead of doing an Ajax postback when I click on the button in the modal div, it just do a full postback. Did somebody have an idea why?
I am starting to use simplemodal and I am truly impressed. Great work. And GREAT JOB ON THE DOCUMENTATION. I have one small problem, when I popup the dialog, I am not able to navigate from one input field to another via the “Tab” key. Has anyone seen this problem?
Thank you,
Tamer
Hi Eric,
In our project we have tried a lot of modal dialog plugins and we found that SimpleModal is the best (very flexible). So I just want to thank you for this nice plugin :).
On the link below you can find a (sexy Dialog) demo inspired by Facebook and based on your Plugin (SimpleModal power! ๐ )
https://blog.populiz.com/popDialog/
Thanks again,
Mehdi.
@Ben – are you able to see if this is still an issue with 1.3?
@hamletborn – something like:
@Ken – Technically speaking, you can’t directly do a file upload using Ajax. There are ways around this, but it is too involved to explain here. You could change it so the send does a standard post and not an ajax call, but you would loose the response message.
@emack – Graco does something similar by embedding flash – that should be similar enough to use as an example.
@george – You are correct, that is the default behavior. This solution should do what you are asking.
@Sam – when are you initializing tinyMCE? You should be doing it in a SimpleModal onShow callback for it to work properly.
@Marsel – are you asking how to use something other than a button to open the confirm dialog? Something like:
@Alvaro Grillet – 1) See my response to @Ken. 2) No I have not tried Google Maps in a modal dialog. Any luck?
@Franz Zieher – 1.3 should fix the centering issues.
@Cristian Ortiz – Did you have a particular question? You bind the open to some event and then call $.modal.close() when you want it to close.
@Drew – the scroll position should not change. Are you using # as the href and not preventing that event?
@carlos – can you email me with more specifics on what you are trying to do.
@lance – there are a number of ways to do this. See @Mehdi’s comment above!
@Dave – 1.3 should resolve that issue.
@Tamer – which version are you using? If it is 1.3b1, I have a fix for that.
@Mehdi – very cool, thanks for sharing!
I’m closing the comments in preparation for the 1.3 version and project page.