SimpleModal 1.4.4 is now available for download.
This release addressed the removal of $.browser in jQuery 1.9 (deprecated since 1.3).
Changes in 1.4.4
- Removed $.browser calls due to removal in jQuery 1.9
If you have any questions regarding SimpleModal, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.
Thanks for using SimpleModal!
Links: Project Page | GitHub Page
Awesome, thanks Eric!
I’m using simplemodal to display an iframe and it works great, however i would like to also display a loading gif between. Is there a means to do so?
Cheers 🙂
Any plans on creating a nuget package for this? It would be making the download and updating of it a lot easier.
Does this imply this version is for jQuery 1.9 and later only?
how do you display an iframe, basic instructions would be great. Like were do I paste the Display an external page using an iframe code inside osx demo. Thanks
Simple modal use with IE 10 ?
I know a “modal” dialog is supposed to “block” an entire document (clicks and keystrokes outside the modal become inoperative, but would blocking a specified element (other than the body) be difficult to implement? (I imagine sizing the modal might be more problematic)
On many occasions I would have liked to block only a div instead of the entire document (say, the contents of a given tab in a tabbed interface). Most modal plugins won’t do this – Malsup’s “block UI” does ( https://www.malsup.com/jquery/block/#element ) but this is not really as full featured as SimpleModal. It would be awesome if SimpleModal could do this.
I’m compelled to share this, there has been a lot of question about how to support the need for a user to choose their own password on sign up. A simple trick I did that worked (completely by accident) after trying countless proclaimed ‘fixes’. Was to
1. Install a plugin, along with SimpleModal, called “Theme My Login”
2. Once installed, click on the “TML” button next to settings in the WP Dashboard, and tick the box “Enable Custom Passwords”
3. Once i ticked that box, and went back to register through SimpleModal, two new fields were AUTOMATICALLY added to the register, (new password, confirm password)
4. I signed up a test, and instead of SimpleModal emailing a generated password, my chosen password was in that field in the email.
So to reiterate, just install Theme My Login, and tick “Enable Custom Passwords”. Thats all that was needed. Hopefully this helps others! Good luck.
IE1 0 does not support
– removeExpression
– setExpression
https://msdn.microsoft.com/en-ca/library/ie/aa358798%28v=vs.85%29.aspx
Issue with IE 10
—————————————-
Dynamic html content not shown in modal dialog..
When we resize the browser the content show’s
.
Any help is appreciated..
Thanks,
Mallesh
Great work on the modal! Question how is there anyway a user can close the Modal by pressing enter? The modal code is below:
$(document).one("ready", function() {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').ready(function () {
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("", function () {
window.location.href = 'https://timebalances/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "x",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
Anyone get this to work with ie 10
Oh wonder, I have trouble with IE. Loading from an intranet server it’s working fine (if you can say that for IE). But when I load it from a remote server IE complaints about removeExpression to be “Not implemented”. The remote is a git clone. So the sources are the same. WTF? This “browser” is driving me nuts!
N.B. if my test site is up and you use IE you should experience this when hovering over the warning at the bottom.
The plugin does not work with IE 10 🙁
Can you please help us to make it work ?
Thank you !
Hi Eric,
I really hate to be a pest, but could you please look at what (to me) is a showstopper bug in this plugin.
The thread is on wp.org https://wordpress.org/support/topic/simplemodal-login-registration-error?replies=4 (and I sent an e-mail to eric@ericmmartin.com then saw that it said there were over 4000 unanswered)
It’s obvious you are very busy so thanks for looking at this when you can.
Ron
troubles with ie10:
Object doesn’t support property or method ‘removeExpression’ .
(jquery.simplemodal-1.4.4.js, line 456)
works with jquery1.9.1 but no with the last 1.10.1.
I was able to get Simple Modal 1.4.4 to work with IE10 by replacing the “boxModel” check in Simple Modal with “false”. This prevents Simple Modal from trying to use the IE6 and IE7 quirks stuff.
Of course this means IE6/7 users are impacted, but I dont care.
You can download my patched version here:
https://www.realtime-fantasy-sports.com/site/js/0/jquery/jquery.simplemodal.js
this article is very nice. thanks for this . I will come back soon.
my website is a educational website about PHD. I think u can learn a lot from this.
Need help fixing ,removeEpression not impl error on IE8
—————————————-
Browser – IE8
JQUERY – jquery-1.10.1.min.js
Simplemodal – jquery.simplemodal-1.4.4.js
Error – Not implemented error,
jquery.simplemodal-1.4.4.js, line 454,
character 7
s.removeExpression(‘height’);
———————————-
Thanks for any pointers/help
IE10 and Simple Modal?
This should work in all browsers, a feature detection for “Expression” does the trick:
https://github.com/redaxmedia/simplemodal/blob/master/src/jquery.simplemodal.js
Related pull request: https://github.com/ericmmartin/simplemodal/pull/34
This was too much, Eric!
Thank you!
If someone is in trouble for wearing newer versions of jQuery, read this:
———————————————–
“Some properties have been removed in jQuery 1.9 and are available only through the plug-in jQuery.migrate. Try using feature detection instead.”
———————————————–
Hi Eric.
I do not work with webdesign and I’m just fascinated by it.
I found it amazing the modal popup working seamlessly with extreme ease of use.
I read some posts here about something not working in IE 10 and I thought it was a mistake of the users, but after poking around the other demos I realized that actually the IE 10 does not support some properties or methods. Among these are ‘set/removeExpression’, ‘add/removeClass’, for example.
All this works perfectly fine in Firefox.
Any tips or tricks?
Thank you.
I’m clueless guys, it seems to me it’s working perfectly fine with my website on IE 10…the set/removeExpression error is the reason i migrated to simplemodal 1.4.4 to begin with.
I’m using jquery 1.8.4 at the moment.
Using SimpleModal 1.4.4 + latest jquery UI + jquery gives me error at f.removeExpression(“height”). Please help, since our Intranet is IE only.
Thanks
I dont think it’s an IE issue. I’m using IE 10, and when I remove the jquery-ui.1.10.3 script it works, or when i remove the jquery1.10.1 script it works, but I get removeExpression error when the 2 files are present
I have the Same IE8 issue on line 454 as everyone else. I switched my jquery library from 1.10.1 to 1.4.1 and it works fine. There a little conflict gongon there.
Thanks for the great article here. I was searching for something like that for quite a long time and at last I have found it here. I hope to see more such nice articles in the nearest future.
Thanks for sharing the great article. actually its enhancing my knowledge basically i also looking out such kind of info only. Glad to have such excellent and understandable info.
Hello, i have a problem in Chrome Browser. When i click on the button and the modal appears, the transparent background behind the content of the modal doesn’t fill the entire screen. When i scroll down, the problem dissapers. How can i fix it up? Thank You.
You know, great minds are named Eric or Erik right? just came to say great work, love how simple yet powerful you script is.
IE10 works for me when I change line 241 to this:
browser.ieQuirks = browser.msie && (typeof($.support.boxModel)!=’undefined’ && !$.support.boxModel);
Very awesome post. Thanks for sharing this.
it’s working for me, @sim is right
Hi guys, give me removeExpression error and i fix it.
My fix :
browser.ie7 = browser.msie && /msie 7.0/.test(ua); find line and add after
browser.expression = true;
try {
document.createElement(‘div’).style.setExpression(‘height’);
document.createElement(‘div’).style.removeExpression(‘height’);
} catch (e) {
browser.expression = false;
}
and s.removeExpression(‘height’); find this line and change (this first line, u change all lines)
if(browser.expression)
{
s.removeExpression(‘height’);
s.removeExpression(‘width’);
s.setExpression(‘height’,” + bsh + ‘ > ‘ + bch + ‘ ? ‘ + bsh + ‘ : ‘ + bch + ‘ + “px”‘);
s.setExpression(‘width’,” + bsw + ‘ > ‘ + bcw + ‘ ? ‘ + bsw + ‘ : ‘ + bcw + ‘ + “px”‘);
}
else
{
s.removeProperty(‘height’);
s.removeProperty(‘width’);
/*var sh = document.body.scrollHeight;
var ch = document.body.clientHeight;
var sw = document.body.scrollWidth;
var cw = document.body.clientWidth;
var h = sh > ch ? sh + “px” : ch + “px”;
var w = sw > cw ? sw + “px” : cw + “px”;*/
//or
var h = eval(” + bsh + ‘ > ‘ + bch + ‘ ? ‘ + bsh + ‘ : ‘ + bch)+’px’;
var w = eval(” + bsw + ‘ > ‘ + bcw + ‘ ? ‘ + bsw + ‘ : ‘ + bcw)+’px’;
s.setProperty(‘height’, h,”);
s.setProperty(‘width’,w,”);
}
and s.removeExpression(‘top’); (this first line, u change all lines)find and change
if(browser.expression)
{
s.removeExpression(‘top’);
s.removeExpression(‘left’);
s.setExpression(‘top’, te);
s.setExpression(‘left’, le);
}
else
{
s.removeProperty(‘top’);
s.removeProperty(‘left’);
s.setProperty(‘top’,eval(te),”);
s.setProperty(‘left’,eval(le),”);
}
This working for me.
Hi,
thanks for the patch, now it’s working on ie10.
I have one more question. Is there a possibility to let the modal window open till manual close? I need that for form submitting.
Kind Regards
Hi,
After implementig bkopdur’s solution I’ve been getting a new error on IE9.
It says s.setProperty(‘top’,eval(te),”); invalid argument.
Anybody knows?
I’ve discovered that the problem occurs on this.offsetHeight on IE9 it returns NaN
I have similar problem like carlos have, how to resolve it. Thanks
how to close dynamically model dialog box.
i have used follwoing code but still problem in IE8 please suggest:
Hi guys, give me removeExpression error and i fix it.
My fix :
browser.ie7 = browser.msie && /msie 7.0/.test(ua); find line and add after
browser.expression = true;
try {
document.createElement(‘div’).style.setExpression(‘height’);
document.createElement(‘div’).style.removeExpression(‘height’);
} catch (e) {
browser.expression = false;
}
and s.removeExpression(‘height’); find this line and change (this first line, u change all lines)
if(browser.expression)
{
s.removeExpression(‘height’);
s.removeExpression(‘width’);
s.setExpression(‘height’,” + bsh + ‘ > ‘ + bch + ‘ ? ‘ + bsh + ‘ : ‘ + bch + ‘ + “px”‘);
s.setExpression(‘width’,” + bsw + ‘ > ‘ + bcw + ‘ ? ‘ + bsw + ‘ : ‘ + bcw + ‘ + “px”‘);
}
else
{
s.removeProperty(‘height’);
s.removeProperty(‘width’);
/*var sh = document.body.scrollHeight;
var ch = document.body.clientHeight;
var sw = document.body.scrollWidth;
var cw = document.body.clientWidth;
var h = sh > ch ? sh + “px” : ch + “px”;
var w = sw > cw ? sw + “px” : cw + “px”;*/
//or
var h = eval(” + bsh + ‘ > ‘ + bch + ‘ ? ‘ + bsh + ‘ : ‘ + bch)+’px’;
var w = eval(” + bsw + ‘ > ‘ + bcw + ‘ ? ‘ + bsw + ‘ : ‘ + bcw)+’px’;
s.setProperty(‘height’, h,”);
s.setProperty(‘width’,w,”);
}
and s.removeExpression(‘top’); (this first line, u change all lines)find and change
if(browser.expression)
{
s.removeExpression(‘top’);
s.removeExpression(‘left’);
s.setExpression(‘top’, te);
s.setExpression(‘left’, le);
}
else
{
s.removeProperty(‘top’);
s.removeProperty(‘left’);
s.setProperty(‘top’,eval(te),”);
s.setProperty(‘left’,eval(le),”);
}
i fix above code;
//s.removeProperty(‘height’);
//s.removeProperty(‘width’);
/*var sh = document.body.scrollHeight;
var ch = document.body.clientHeight;
var sw = document.body.scrollWidth;
var cw = document.body.clientWidth;
var h = sh > ch ? sh + “px” : ch + “px”;
var w = sw > cw ? sw + “px” : cw + “px”;*/
//or
var h = eval(” + bsh + ‘ > ‘ + bch + ‘ ? ‘ + bsh + ‘ : ‘ + bch)+’px’;
var w = eval(” + bsw + ‘ > ‘ + bcw + ‘ ? ‘ + bsw + ‘ : ‘ + bcw)+’px’;
//s.setProperty(‘height’, h,”);
//s.setProperty(‘width’,w,”);
$(s).height( h);
$(s).width( w);
=================
$(s).css(‘top’, eval(te));
$(s).css(‘left’, eval(le));
//s.removeProperty(‘top’);
//s.removeProperty(‘left’);
//s.setProperty(‘top’, eval(te),”);
//s.setProperty(‘left’, eval(le),”);