Copyright © 2012 Tom Coote. All Rights Reserved. Powered by WordPress themed by bavotasan.com.
Sometimes all you need is the simplest kind of functionality to get a job done. I was working on a project recently and needed a no frills pop up to show another document. What I realised is all the modal type scripts I have or had seen on the internet all came with added extra’s that I just didn’t want to mess around with, so I created a simple modal script.
You can check out the demo page here. It requires jQuery on the page for it to work. The following script is an example of how to open a window;
SimpleModal.open('demo1.html', 500, 600);
Here is the script to close a modal;
SimpleModal.close();
The modal windows are always closed in last in first out order.
Update: I have added the ability to specify a callback function. So if the callback is specified then when that modal has been closed the function gets invoked.
SimpleModal.open('demo1.html', 500, 600, function() {
alert('This is a callback function');
});
Update 2: I have release version 2 of the SimpleModal script. It comes with better support for some of the newer web browsers and the latest version of jQuery (currently v1.6.1). I’ve also updated the examples to show how data can be passed back to the openers callback function from the modal window so check that out. Finally, it’s now licensed under the 3 clause BSD licence.
Download the source (now version 2)
Demo Page
Code on GitHub
Tested to work in the following browsers;
- IE 6+
- FireFox
- Opera
- Chrome
- Safari for windows
January 12, 2011 at 4:40 pm
I love Simple Modal it works fantastic. I do have a question. Is it possible to set the tab focus to be on the modal pop-up?
January 12, 2011 at 4:43 pm
Good to hear. I’m not sure what you mean to be honest? When the pop up is showing the page underneath shouldn’t be usable by the user anyway.
January 20, 2011 at 4:18 pm
I am working on a project that the users has disabilities, so they may have use the tab key to navigate through the webpage, they hit enter to select the link. When the tab and enter a link that opens the modal the tab focus is stilling on the main page and not transferring to the modal window. If I can click on the modal window it then has the focus. I was wondering if you know how I can transfer the focus when the modal opens without clicking.
January 20, 2011 at 4:33 pm
Ahh right I see what you mean. Well you could transfer the focus to the pop up after the pop up has finished loading using the document ready JavaScript event.
$(function() {
$(document.body).focus();
});
That should work, or a variation of it. Hope that helps. This code would go in the pop up page.
January 20, 2011 at 4:47 pm
Wow Tom you are the Master. I am not sure how that works but it did. I thank you for your help and this wonderful script.
February 22, 2011 at 5:58 am
Not meaning to nitpick here, don’t get me wrong, you got a nice script here that I might use myself some day, but it must have been an honest (and unfortunate) oversight that you named it Simple Modal which happens to be also the name of a great modal script by Eric Martin (http://www.ericmmartin.com/projects/simplemodal/) that’s been around for years. I don’t know what the legalities would be here (I am not a lawyer) but I guess the guy who named his script first gets to keep the name. Might be something to look into from a copyright perspective. Just my 2 cents worth.
February 22, 2011 at 9:14 am
Hi J.P. There is nothing wrong with two things having the same name! I’m not bothered and I doubt Eric is either.
April 28, 2011 at 11:20 am
Hi, good script & nice work
I see the license is GPL, so we can’t use it
Any chance making it LGPL or dual license maybe ?
Nice work
May 1, 2011 at 9:38 am
Hi C.R. I’ve changed it to the 3 clause BSD licence. Download it again from this page to get the new licence.
June 23, 2011 at 3:18 pm
Can you put this on github so i can fork it? If you don’t I may have to
June 23, 2011 at 4:08 pm
Ha, yeah sure. I’ll put it on and pass you a link.
June 23, 2011 at 6:08 pm
Here you go https://github.com/cootetom/SimpleModal
July 5, 2011 at 7:51 pm
thank you sir.
August 9, 2011 at 10:33 pm
I am seeing a problem when I changed my server to be a Secure Server and now Simple Modal with Mac and IE 9 gives a warning about displaying secure and non-secure information. This causes the close function to not work. Anyone else have this issue?
August 9, 2011 at 11:58 pm
Are you loading it on to the page using SSL? If you have SSL then absolutely every request for data from the page must also go through SSL otherwise the browser will present a warning to the user.
August 26, 2011 at 7:53 pm
First, awesome job! Second, I’m using http://www.highcharts.com for some charting and everytime I use Simple Modal over a javascript chart my modal window is behind the chart. Is there a way (or setting) to bring Simple Modal to the front of all javascript on the page?
August 26, 2011 at 8:02 pm
It’s probably just a z-index thing. The SimpleModal places a div on the page with a class of _simpleModal. Try giving that div a high z-index.
August 26, 2011 at 8:20 pm
Shew! That was it. Thanks!
October 4, 2011 at 7:38 pm
I just love the simplicety of your modal. it has the functionality i needed, nothing more nothing less. just perfect.
January 31, 2012 at 7:47 pm
Hey Tom, did you ever notice that when the parent window has a vertical scroll bar and you use Simple Modal to open not 1 but 2 dialog windows (one on top of the other), Simple Modal does not return the vertical scroll bar to the parent window. You have to refresh the parent page to get the vertical scroll bar back. This is true for both FF and IE. Thoughts?