Tom Lauck’s Deseloper.org

A Simple Modal – Redux

author:

Over a year ago I walked through an example of creating the basic foundation for a modal window using jQuery.  The goal was simplicity, minimalism, and flexibility to add-on functionality as needed.

As stated at the outset, this post was meant to illustrate a bare bones and simple example of a modal window. If you wanted to extend the functionality for example, it would be quite simple to [...] suit needs.

Last Year’s A Simple Modal Post

The example was well received in feedback from readers, and there was some constructive criticism as well. Equal to the amount of people that appreciated the minimalistic approach were requests from readers to support IE6, forms, and a host of other odds and ends.  Some readers had some useful feedback for features and additions that I purposefully did not include in an effort to keep things basic.

Therefore, I thought there was a nice opportunity to revisit the basic modal window script and make it a bit more comprehensive in an effort to suit the needs and requests of the aforementioned readers.  So before we get into the code, lets outline some things that have changed:

  • Converted for use as a jQuery plugin.
  • Added IE6 compatibility
  • Added Opera compatibility
  • Added ability to fade in and out
  • Added multiple ways of setting parameters
  • Added multiple content types (‘image’ and ‘iframe’)

View Example | Download Source

The Plugin

(function ($) {

	/**********************************
	* CUSTOMIZE THE DEFAULT SETTINGS
	* Ex:
	* var _settings = {
	* 	id: 'modal',
	* 	src: function(sender){
	*		return jQuery(sender).attr('href');
	*	},
	* 	width: 800,
	* 	height: 600
	* }
	**********************************/
	var _settings = {
		width: 800, // Use this value if not set in CSS or HTML
		height: 600, // Use this value if not set in CSS or HTML
		overlayOpacity: .85, // Use this value if not set in CSS or HTML
		id: 'modal',
		src: function (sender) {
			return jQuery(sender).attr('href');
		},
		fadeInSpeed: 0,
		fadeOutSpeed: 0
	}

	/**********************************
	* DO NOT CUSTOMIZE BELOW THIS LINE
	**********************************/
	$.modal = function (options) {
		return _modal(this, options);
	}
	$.modal.open = function () {
		_modal.open();
	}
	$.modal.close = function () {
		_modal.close();
	}
	$.fn.modal = function (options) {
		return _modal(this, options);
	}
	_modal = function (sender, params) {
		this.options = {
			parent: null,
			overlayOpacity: null,
			id: null,
			content: null,
			width: null,
			height: null,
			modalClassName: null,
			imageClassName: null,
			closeClassName: null,
			overlayClassName: null,
			src: null
		}
		this.options = $.extend({}, options, _defaults);
		this.options = $.extend({}, options, _settings);
		this.options = $.extend({}, options, params);
		this.close = function () {
			jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
		}
		this.open = function () {
			if (typeof options.src == 'function') {
				options.src = options.src(sender)
			} else {
				options.src = options.src || _defaults.src(sender);
			}

			var fileExt = /^.+\.((jpg)|(gif)|(jpeg)|(png)|(jpg))$/i;
			var contentHTML = '';
			if (fileExt.test(options.src)) {
				contentHTML = '<div class="' + options.imageClassName + '"><img src="' + options.src + '"/></div>';

			} else {
				contentHTML = '<iframe width="' + options.width + '" height="' + options.height + '" frameborder="0" scrolling="no" allowtransparency="true" src="' + options.src + '"></iframe>';
			}
			options.content = options.content || contentHTML;

			if (jQuery('.' + options.modalClassName).length && jQuery('.' + options.overlayClassName).length) {
				jQuery('.' + options.modalClassName).html(options.content);
			} else {
				$overlay = jQuery((_isIE6()) ? '<iframe src="BLOCKED SCRIPT\'<html></html>\';" scrolling="no" frameborder="0" class="' + options.overlayClassName + '"></iframe><div class="' + options.overlayClassName + '"></div>' : '<div class="' + options.overlayClassName + '"></div>');
				$overlay.hide().appendTo(options.parent);

				$modal = jQuery('<div id="' + options.id + '" class="' + options.modalClassName + '" style="width:' + options.width + 'px; height:' + options.height + 'px; margin-top:-' + (options.height / 2) + 'px; margin-left:-' + (options.width / 2) + 'px;">' + options.content + '</div>');
				$modal.hide().appendTo(options.parent);

				$close = jQuery('<a class="' + options.closeClassName + '"></a>');
				$close.appendTo($modal);

				var overlayOpacity = _getOpacity($overlay.not('iframe')) || options.overlayOpacity;
				$overlay.fadeTo(0, 0).show().not('iframe').fadeTo(_settings.fadeInSpeed, overlayOpacity);
				$modal.fadeIn(_settings.fadeInSpeed);

				$close.click(function () { jQuery.modal().close(); });
				$overlay.click(function () { jQuery.modal().close(); });
			}
		}
		return this;
	}
	_isIE6 = function () {
		if (document.all && document.getElementById) {
			if (document.compatMode && !window.XMLHttpRequest) {
				return true;
			}
		}
		return false;
	}
	_getOpacity = function (sender) {
		$sender = jQuery(sender);
		opacity = $sender.css('opacity');
		filter = $sender.css('filter');

		if (filter.indexOf("opacity=") >= 0) {
			return parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100;
		}
		else if (opacity != '') {
			return opacity;
		}
		return '';
	}
	_defaults = {
		parent: 'body',
		overlayOpacity: 85,
		id: 'modal',
		content: null,
		width: 800,
		height: 600,
		modalClassName: 'modal-window',
		imageClassName: 'modal-image',
		closeClassName: 'close-window',
		overlayClassName: 'modal-overlay',
		src: function (sender) {
			return jQuery(sender).attr('href');
		}
	}
})(jQuery);

As you can see, quite a bit has changed – which is not necessarily a bad thing.  There is now tighter integration with jQuery and more out of the box configuration ability as a result.

Adding Some Style

.modal-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #131313;
	opacity: .85;
	filter: alpha(opacity=85);
	z-index: 101;
}
.modal-window {
	position: fixed;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;
	z-index: 102;
	background: #fff;
	border: solid 8px #000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}
.close-window {
	position: absolute;
	width: 47px;
	height: 47px;
	right: -23px;
	top: -23px;
	background: transparent url(../images/close-button.png) no-repeat scroll right top;
	text-indent: -99999px;
	overflow: hidden;
	cursor: pointer;
}

Implementation

<a href="modal.html" onclick="$(this).modal({width:833, height:453}).open(); return false;">Modal iFrame</a>
<a href="images/your-image.jpg" onclick="$(this).modal({width:500, height:375}).open(); return false;">Modal Image</a>

Although a little more weight has been added to the script itself, the implementation is more flexible and can be used with just about any jQuery chain – whether its onclick, a document being loaded, you name it.  There is also an added ability to set parameters in your area of choosing – inside the CSS, in the plugin itself, or in the method call or jQuery chain object.

Moving Forward

So if you are looking for something extra simple, head on over to last years post and in the meantime enjoy the added functionality with this updated example.

View Example | Download Source

124 Responses

date: October 22nd, 2009

You should expand this to have a bounding context, so that it can be centered on a specific element on your screen. Say a dynamically loaded AJAX panel.

To keep the current functionality defaulted to the whole screen just set the bounding context to the document.

Do you think this would be possible?

spoken by: Nick Berardi

date: October 22nd, 2009

It’s not incredibly obvious, but the parent property can be overridden and used to position over an element – either in the call or in the settings for the plug-in. The caveat is that CSS would need to be used to set the bounding instead of JavaScript – which isn’t a bad thing if you think of web pages in MVC terms.

I’ll look into expanding on this and some clarification around it.

spoken by: tom

date: October 22nd, 2009

Nice work!

spoken by: Jody

date: October 22nd, 2009

Tom,

The author of SimpleModal here, congrats on the updated version. I just have a couple of thoughts to share with you:

1) I’ve been using the $().modal and $.modal() namespace in jQuery for a couple of years now. If you are planning on adding this to the jQuery plugins site, you might consider changing yours to something that won’t conflict.

2) Because you are aliasing the jQuery object with $, you can switch all of your jQuery() calls to $(). Not a big deal, but will save on some byte size ;)

3) Your download source link is getting a 500 server error.

spoken by: Eric Martin

date: October 23rd, 2009

1. There are no real plans on adding this to the jQuery plugin site – again, this was originally meant as more of an example to build off of.

2. Normally that would be correct. However, in this case $(this) is allowing the plugin to get the target source based on the href attribute of the element the onclick it is on. If we were to call the modal window object (for instance, as there is on the modal.html where I use the aliasing you describe), that may be the preferred method.

3. There was an issue with Google App Engine which is resolved now.

spoken by: tom

date: December 11th, 2009

The zip file is corrupted.

spoken by: Alex

date: December 11th, 2009

Also the ‘copy to clipboard’ doesnt seem to work on Windows XP+Firefox 3.5.5

spoken by: Alex

date: December 17th, 2009

@alex I double checked the zip file and everything checked out fine. If you have more details about the process you took to download them, please send them to me – I couldn’t duplicate it.

Also, the code highlighting plugin I am using is a bit dated. I’m currently redesigning the site, so keep an eye out for an update – with better syntax highlighting ;)

spoken by: tom

date: December 17th, 2009

I wanted a modal I could dynamically pass the width and height parameters to from my href onclick event, yours works great because of this functionality. Thank you!

spoken by: steve

date: December 23rd, 2009

is it possible to make the modal truly modal in that you cannot close it/ignore it by clicking on the rest of the page etc?
currently the modal allows you to click elsewhere and close the modal.

spoken by: csaket

date: January 13th, 2010

very cool script. One issue that I have found is that if I launch the window, then close it and then try and call a seperate jscript function that has window.open in it the jscript fails. It is conflicting with the modal.open. If I rename the modal .open’s to openM for example then everything is ok. I can’t figure out how to sort it though.

spoken by: Tim

date: February 9th, 2010

How can i submit AND close a form in the modal window? .. the example only close and not submit (via post or get). Can you help me with that?

spoken by: villas

date: February 9th, 2010

Submit and Close

Just close and NOT submit the field … how can i submit the form?

spoken by: villas

date: February 14th, 2010

Hi, On closing the modal, I want to refresh the parent window. Can you please give me example. Thanks.

spoken by: Ayya

date: March 6th, 2010

I did not understood exactly, how can i make this happen on page load automatically and not on link click, if anyone can tell me this,

Thank You All!

spoken by: carlos

date: April 18th, 2010

//place this code in the modal window after all action had been done and you want to close the modal window and refresh the source page.
//the reloadsorce reloads the source screen where the link to the modal window is.
//the doit function first closes the modal window and then calls the reloadSource function. Grtz mediazone.nl :-)
function reloadSource() {
var p_ref=parent.location.href;
parent.location.href=(p_ref);
}

function doit() {
parent.$.modal().close()
reloadSource();
}
doit();

spoken by: Ron

date: April 28th, 2010

Hi firstly thank you for the script. I have a question. I want to use auto height. but I can not use. I wonder how I can do.

spoken by: Coco

date: April 30th, 2010

how do i click a link inside the modal-window and got a new modal-window without the parent window

spoken by: alon

date: June 1st, 2010

I’m really new to this and your tutorial was great. I was easily able to implement this and modify it. However, I cannot for the life of me get the close icon to show up. The first article on this page will show you what I mean:

http://papergodmother.com/test/wedding_invitation_tips_and_advice.html#

Anyone’s help (or even a point to the correct forum for the question) would be greatly appreciated!

spoken by: tiffani

date: June 1st, 2010

One more thing. I’m trying to make the height adjustable to the content and I can’t seem to do that. Any advice?

spoken by: tiffani

date: June 1st, 2010

tiffani,

You’re eliminating the background image for .close-window near the end of your CSS file. Remove the “background: url();” from the last .close-window selector (I guess leave the “filter” line) and see if that helps.

E.

spoken by: erat

date: July 13th, 2010

Hi, Thanks for provide the code. I was planning to post changes on my blog but actually I don’t like post code in blogs (I like to read only). So.. I’ve some improvements on your code so that it would be really reusable. You shouldn’t be dependent on html anchor object at all. Anyway.. I still thank you. Have my improvements.

Eduardo Xavier
BendingBits.com

///

/************************************************************************************************************
* SIMPLE MODAL v 2.0
* © 2009 FISHBOWL MEDIA LLC
* http://fishbowlmedia.com
***********************************************************************************************************/
(function ($) {

/**********************************
* CUSTOMIZE THE DEFAULT SETTINGS
* Ex:
* var _settings = {
* id: ‘modal’,
* src: function(sender){
* return jQuery(sender).attr(‘href’);
* },
* width: 800,
* height: 600
* }
**********************************/
var _settings = {
width: 800, // Use this value if not set in CSS or HTML
height: 600, // Use this value if not set in CSS or HTML
overlayOpacity: .85, // Use this value if not set in CSS or HTML
url:”,
id: ‘modal’,
src: function (sender) {
return jQuery(sender).attr(‘href’);
},
fadeInSpeed: 0,
fadeOutSpeed: 0
}

/**********************************
* DO NOT CUSTOMIZE BELOW THIS LINE
**********************************/
$.modal = function (options) {
return _modal(this, options);
}
$.modal.open = function () {
_modal.open();
}
$.modal.close = function () {
_modal.close();
}
$.fn.modal = function (options) {
return _modal(this, options);
}
_modal = function (sender, params) {
this.options = {
parent: null,
overlayOpacity: null,
id: null,
content: null,
width: null,
height: null,
modalClassName: null,
imageClassName: null,
closeClassName: null,
overlayClassName: null,
src: null
}
this.options = $.extend({}, options, _defaults);
this.options = $.extend({}, options, _settings);
this.options = $.extend({}, options, params);
this.close = function () {
jQuery(‘.’ + options.modalClassName + ‘, .’ + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
}

this.open = function () {

var fileExt = /^.+\.((jpg)|(gif)|(jpeg)|(png)|(jpg))$/i;
var contentHTML = ”;

if (options.url!=”)
{
contentHTML = ”;
}
else
{
if (typeof options.src == ‘function’) {
options.src = options.src(sender)
} else {
options.src = options.src || _defaults.src(sender);
}

if (fileExt.test(options.src)) {
contentHTML = ”;

} else {
contentHTML = ”;
}
}

options.content = options.content || contentHTML;

if (jQuery(‘.’ + options.modalClassName).length && jQuery(‘.’ + options.overlayClassName).length) {
jQuery(‘.’ + options.modalClassName).html(options.content);
} else {
$overlay = jQuery((_isIE6()) ? ” : ”);
$overlay.hide().appendTo(options.parent);

$modal = jQuery(” + options.content + ”);
$modal.hide().appendTo(options.parent);

$close = jQuery(‘‘);
$close.appendTo($modal);

var overlayOpacity = _getOpacity($overlay.not(‘iframe’)) || options.overlayOpacity;
$overlay.fadeTo(0, 0).show().not(‘iframe’).fadeTo(_settings.fadeInSpeed, overlayOpacity);
$modal.fadeIn(_settings.fadeInSpeed);

$close.click(function () { jQuery.modal().close(); });
$overlay.click(function () { jQuery.modal().close(); });
}
}
return this;
}
_isIE6 = function () {
if (document.all && document.getElementById) {
if (document.compatMode && !window.XMLHttpRequest) {
return true;
}
}
return false;
}
_getOpacity = function (sender) {
$sender = jQuery(sender);
opacity = $sender.css(‘opacity’);
filter = $sender.css(‘filter’);

if (filter.indexOf(“opacity=”) >= 0) {
return parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100;
}
else if (opacity != ”) {
return opacity;
}
return ”;
}
_defaults = {
parent: ‘body’,
overlayOpacity: 85,
id: ‘modal’,
content: null,
width: 800,
height: 600,
modalClassName: ‘modal-window’,
imageClassName: ‘modal-image’,
closeClassName: ‘close-window’,
overlayClassName: ‘modal-overlay’,
src: function (sender) {
return jQuery(sender).attr(‘href’);
}
}
})(jQuery);

spoken by: Eduardo Xavier

date: July 30th, 2010

How would I get this to open on page load?

spoken by: jon

date: July 31st, 2010

I noticed this Modal script conflicts with other scripts, like ColorBox modal – how can we eliminate this conflicting and use both?

spoken by: Rich Boy

date: July 31st, 2010

Here’s how to get Auto-Page Height and also how to make it popup on page load. This works 100% as far as I can tell in IE6+ Safari FF3.0+ and Chrome

First you get the content pages height. Place this in a file called “dynamic-iframe-height.js”

/*=============================================================================*/
// Dynamically Get Iframe HEIGHT!

function sizeIframe() {

var theiframe = jQuery(“#theiframe”);
var innerDoc = (theiframe.get(0).contentDocument) ? theiframe.get(0).contentDocument : theiframe.get(0).contentWindow.document;

// theiframe.height(innerDoc.body.scrollHeight); //resize onpage iframes automatically HERE

var height = innerDoc.body.offsetHeight + 16; // +16 is to offset the 8px top and 8px bottom border of SimpleModalNDS script.

//alert (‘Sizing Iframe’);
$(“#popupHeight”).html(height);

} // end sizeIframe()

jQuery(function() {
//jQuery(“#theiframe”).load(sizeIframe);
jQuery(“#theiframe”).load(function(){
// $(this).css(‘display’, ‘none’); // also set and height=”0″ on the iframe so it doesnt EVER display itself - DONT SET width=”0″ BECAUSE IE WILL READ 0 IN THE OPENPOPUP() SCRIPT!
});
});
//setTimeout(“$(‘#runSizeIframe’).click()”,3000); //automatially run sizeIframe() script after XXXX milliseconds because IE does NOT consistently have a successful .load even for an iframe and nothing happens! – moved this on the page next to the settimeout for popuping up the iframe box

// Dynamically Get Iframe HEIGHT! – Original functino doesnt work reliable on IE

/*
$(document).ready(function(){
$(‘#theiframe’).load(function() {
var height = this.contentWindow.document.body.offsetHeight; // offsetHeight or scrollHeight;
var width = $(‘#popupWidth’).text();

$(“#popupHeight”).html(height);
$(this).css(‘display’, ‘none’); // also set and height=”0″ on the iframe so it doesnt EVER display itself - DONT SET width=”0″ BECAUSE IE WILL READ 0 IN THE OPENPOPUP() SCRIPT!

});
});

*/
/*
Keep this hidden for an alternate way to call the frame height WITHOUT using jquery and only JS

var frame = document.getElementById(‘theiframe’); // not sure why $(‘#theiframe’); doesn’t work
var height = frame.contentWindow.document.body.scrollHeight + “px”; // I only reset this variable to show how height of the iframe can be checked WITHOUT using jquery at all – no using ‘this’ like in var height above and to show that I can set + ‘px’ in te variable like this
var width = $(‘#popupWidth’).text();
$(“#popupHeight”).html(height); */

// Load the Simple Popup Modal Script With Dynamic Height!!!
function openPopup() {

$(‘#mainPopup’).modal({
// width: width,
// height: height
width: $(‘#popupWidth’).text(),
height: $(‘#popupHeight’).text() // requires: $(“#popupHeight”).html(height);
//,overlayOpacity:0.70 //doesn’t seem to work here, only in the CSS opacity and filter alpha opacity
})
.open();
}

//setTimeout(“$(‘#mainPopup’).click()”,1000); // this is called on the page in a php if then condition to prevent the popup from being called if a user already entered their email (cookie is set) – left here to show that its needed to be called if not using the cookie condition script

//setTimeout(\”$(‘#runSizeIframe’).click()\”,2500);

//setTimeout(\”sizeIframe()\”,2500);// decided its better to just call the script directly instead of creating an html button and simulating a click@

//setTimeout(\”$(‘#runSizeIframe’).click()\”,2500);

//setTimeout(\”sizeIframe()\”,2500);// decided its better to just call the script directly instead of creating an html button and simulating a click@

//Automatically ron sizeIframe and openPopup!
function activateSimpleBoxNDS() {

//$(‘#theiframe’).trigger(‘load’);

$(document).ready(function(){
//$(‘#theiframe’).ready(function() {

$(‘#theiframe’).one(‘load’, function() {
//$(‘#theiframe’).one(‘load’, function() {

//do something

setTimeout(“sizeIframe()”,500);
setTimeout(“$(‘#mainPopup’).trigger(‘click’)”,700);
})

/*$.each(function(){
if(this.complete) $(this).trigger(‘load’); });
*/
});

setTimeout(“$(‘#theiframe’).trigger(‘load’)”, 4000);

}
/*=============================================================*/

(end dynamic-iframe-height.js” – see comment below for part 2)

spoken by: Rich Boy

date: July 31st, 2010

Please delete my other post where I posted the code on page since the code is messed up due to the formatting of the Quotes.

RB
http://www.ThaRichBoy.com/home

spoken by: Rich Boy

date: September 14th, 2010

Hi, I have used this modal box code for many of my websites. Its a fantastic code and works like a charm. Thou I am having some difficulties on the below mentioned use case:

I am using iframe to load 1 of my pages inside the modal box. I have some buttons on the page which lead to different pages on my website. On click on a link “How do I make the model window close and pass the url to parent browser”

Please help me as I am in urgent need.

spoken by: Sid

date: September 21st, 2010

@RB:

1.) would be nice to know how you made your on load…

2.) i got to your website: WHAT THE HELL ARE YOU DOING TO YOUR VISITORS??????????????????????????? (IMPORTUNATE!)

spoken by: AceLine

date: November 6th, 2010

How would I pass data from a database generated table to the iframe when I open it? Specifically I’m trying to pass an ID so I can autofill a form in the iframe. Any help is greatly appreciated.

spoken by: Mike

date: December 28th, 2010

I love your script and it looks great. I have one problem. When I scroll down down a long page to a link that opens the MODAL WiNDOW, the window appears at the top of the page and I have to scroll up to find it. Is it possible to have the window appear wherever I’m scrolled to on the parent page? Please my problem: http://www.logicpkg.com/learn_cartonstyles.htm

Thank you.
Erik

spoken by: Erik R. Peterson

date: February 7th, 2011

great script. I simply change scolling=auto to get scroll bars in modal-window.js

spoken by: Tony

date: February 10th, 2011

I’m new to all of this but i’ve creted a game site, and when I want to change game, you click on a link to open up the modal window which displays the selection of games. When I click on a link, the game opens in the modal window but I want it to open in the Internet Explorer window instead.

spoken by: Josh

date: February 24th, 2011

Hi

When I implemented this script and CSS, it worked perfectly with Chrome on WinXP. But on IE7 on WinXP, the most of the modal window is pushed into the lower left hand corner of the screen, making it impossible to use. I’m a jQuery layman, so would be grateful for any pointers on how to fix this for IE7.

Thanks!

spoken by: SofaKing

date: March 18th, 2011

asdsadasdsad

spoken by: sdfg

date: March 19th, 2011

Great script. Only one problem with IE9. When I try to close the window asks for confirmation: The web page you are visiting is trying to close the tab … You could solve this problem? Thank you!

spoken by: Marcio

date: April 2nd, 2011

Just found your script, fantastic! Very easy to read. Thank you for publishing this and also walking us through implementation.

spoken by: Trevor

date: April 6th, 2011

Thank you very much for your script. I read and loved and used.
As Marcio said, I have a same problem with IE 9. I would be very appricated it if somebody could give me a any suggestions to overcome the IE 9 Problem.

spoken by: miya

date: April 11th, 2011

How to remove the bug on close from IE9? (Read Marcio and Miya) I need it very much and many people need, is a matter of time. Somebody help please!!

spoken by: David

date: April 21st, 2011

for IE 9 problem I found out a work around.
you should rename function close() something like as follows

$.modal.closeModal = function () {
_modal.closeModal();
}

and

this.closeModal = function () { ….

“this” object is window and caused the conflict with native function close()

I hope this could help you.

spoken by: Eyekon

date: April 22nd, 2011

Thanks a lot for your help Eyekon! Unfortunately after renaming the function the problem also occurs in ie8 and ie9. Please help me find a solution to this problem!

spoken by: Marcio

date: April 22nd, 2011

SOLVED! As described Eyekon (Thank you so much!) to correct this problem
you need to rename:

$.modal.closeModal = function () { _modal.closeModal() };
this.closeModal = function () { …

$close.click(function () { jQuery.modal().closeModal() });
$overlay.click(function () { jQuery.modal().closeModal() })

spoken by: Marcio

date: May 12th, 2011

Cheers eyekon & marcio.
Your fix worked great. And thx Tom for putting this all together.

To clarify even further, one just has to add “Modal” after .close in the js file

spoken by: jwig

date: May 13th, 2011

Hi

Great Script but i have a little problem…

I trie to call the new window from inside a iframe in my html code and no open new window, the href is opened directly in the body of my iframe, any idea?

Thanks in advance

spoken by: Nacho

date: May 14th, 2011

Hi,

(I know, I am showing Flash on my site, but soon it will be jQuery/Modal all over……)

At first, forgive me, I am not a JS guru, just a simple old man coding in 10 dif languages, EXCEPT Javascript. Sometime I “borrow” a script somewhere, But I always load it back up…….

My question: I have a simple need, JUST TO OPEN AN EXTERNAL LINK IN A MODAL OVERLAY.

I have read a lot on Eric Martin’s site, trying to figure out the JS code for it, but haven’t been able to get the job done, sofar,

It would be nice if somebody amongst you JS-professors could wrap one of those scripts (there a quite a view in preceeding posts) into a .ZIP file, called something like “index.html” and shows everything from to to let my dream come through.
And if it even would a working one without errors, you would make my day……

So maybe somebody has 3 minutes to copy & paste and do me a big favor.

In return I offer you 2 years 3 gig WebSpace on my server with all the goodies, FOR FREE OF COURSE…..

Thanks a bunch in advance.

spoken by: Hans

date: May 14th, 2011

Sorry: somewhere it left out the html tags. but I as asking a script from the beginnen html to the end html. Maybe this display…..
Thanks

spoken by: Hans

date: June 3rd, 2011

Inside the modal window,
got a new modal window with out close parent window.
Can do ?

spoken by: Tutu

date: June 23rd, 2011

Why isn’t this on github?

spoken by: David Salazar

date: July 21st, 2011

how can i call this n page load?..

spoken by: malou

date: July 29th, 2011

I don’t want people to be able to click outside the modal to make it go away. How do I do this?

spoken by: Chris Jones

date: August 5th, 2011

Hi Everyone,

This script is awesome. I use to open an iframe with an external site and works great except when the external site post to my webapp, I need to close de iframe and refresh the page with the new values.
Does anyone had the same problem? How could you solve it?
Thanks in advanced

Mechi

spoken by: Mechi

date: August 11th, 2011

Hi Everyone,

First i would like to thank Tom, for his great plugin. I want to use this in my application but i am unable to unzip the plugin which is downloaded from the above link. It is showing Error: central directory not found.

Thanks in advance
Pushpa

spoken by: Pushpa

date: August 26th, 2011

[...] this post is a study notes for the A Simple Modal – Redux. You can download the source file from the original article [...]

spoken by: Simple HTML Modal Window Based on jQuery | roman10

date: September 19th, 2011

Chris Jones

Try to comment out the line
$overlay.click(function () { jQuery.modal().closeModal() })

spoken by: Lloydie T

date: September 25th, 2011

I’m also getting an error when trying to unpack the zip… “Fatal error: Error: central directory not found”.
Maybe it’s a Mac/OSX issue?
I’m on MBP, Google Chrome 14.0.835.186, OSX 10.6.8, WinZip Mac Ed. 1.5

spoken by: Doc

date: November 1st, 2011

Hi.

Congratulations for your window modal example.

I try get the informations from a FORM using your example (page modal.html, in the button tag), but not work. I don’t wanto to get the informations typed in the input tags.

You can help me? Tks.

Email

Senha

 

Submit and Close

spoken by: Rick

date: November 15th, 2011

I’m using the modal window to preview a content, which varies widely. But in this plugin we are setting a fixed height, so sometimes the content is not completely visible.

I do not want the scroll bar option here, which I’ve already tried.

Is there any way to make the modal change its height depending on the content(most importantly height in my case)?

Thanks in advance!

spoken by: Mahadeva Prasad

date: November 26th, 2011

Hi,
Thanks to the author for the script. I did come across an issue while using this script. I am using the modal window to show a contact form. Now within this modal window contact form, I have attached the following event to the form:
onsubmit=”return validateform(this);”

So what I am trying to do is, validating the input upon clicking the submit button/form submission. An extract from this JS is following:

function validateform(frm_contact)
{
alert(‘hi’);
}

As you can see, I expected the ‘hi’ to popup but that never happened. This means that no alerts would be shown for any of the input fields upon validation. So in short, I am unable to show alerts within this modal window. How can I fix it so that I can show the alerts?

All help is appreciated. Thank you.

spoken by: Web Dev

date: November 30th, 2011

What i don’t realize is actually how you are now not actually a lot more smartly-liked than you might be right now. You’re very intelligent. You know therefore significantly with regards to this subject, produced me personally believe it from numerous varied angles. Its like men and women don’t seem to be interested until it is something to accomplish with Woman gaga! Your personal stuffs excellent. Always maintain it up!

spoken by: Donny Reisdorf

date: November 30th, 2011

Thanks for the reply for IE 9 problem..

spoken by: Simmya

date: December 23rd, 2011

Great job with the script. I haven’t made the update for IE9, yet but will try it out. I do have an issue with Chrome and Firefox. When I launch the modal window with iframe, for some reason when the iframe content finishes loading, and actually continues to load the referenced page. I do have return false on my onclick event, so it’s not that. Anyone else seen this happen? The modal works like a champ in IE8. Thanks in advance.

spoken by: jaredp

date: December 23rd, 2011

Nevermind. I figured it out almost as soon as I posted my previous comment. I wrapped the call in a function and didn’t return the “false” all the way back out. Thanks again for the great script!

spoken by: jaredp

date: January 3rd, 2012

This script is awesome!

Here’s a few working examples of it with AutoLoad delay 5 seconds:

http://www.centerforconfidence.com
http://www.therichboy.com
http://www.socialseduction.com

Thanks to Eyekon and Marcio for the IE9 bug “The web page you are visiting is trying to close the tab”. This now allows the popup to close normally without closing the whole browser window.

Thanks to all!

P.S. See comment 1701 for instructions on how to AutoLoad and AutoResize the modal popup:
http://deseloper.org/read/2009/10/jquery-simple-modal-window/#comment-1701

spoken by: Nate

date: March 28th, 2012

i really like this demo, but i am not able to download the source.
It is giving central directory error

spoken by: neha

date: April 19th, 2012

I made the change suggest by eyekon and mario and they do not seemto do the trick. Under IE9, I still get the “… trying to close the window….”, did i miss i made the following changes
1. $.modal.closeModal = function () { modal.closeModal(); }
2. this.closeModal = function () {
3. $close.click(function () { jQuery.modal().closeModal(); });

I commented out the overlay – did i miss something

spoken by: alnoor

date: April 19th, 2012

ok found it

in the modal window i was doing the following

window.parent.$.modal().close();

changed to

window.parent.$.modal().closeModal();

spoken by: alnoor

date: April 19th, 2012

I would like to refresh the parent window but do not want the resend message that is sent when using FF or IE (chrome does not put that message)

I am using parent.location.reload(true);

and i have tried several variations on this

is there a way to do this

spoken by: alnoor

date: May 1st, 2012

Vintage toys never go out of style. If you want to have some of the neat toys from when you were younger, check out our webstore.

spoken by: G.I. Joe

date: May 17th, 2012

I have really learned result-oriented things as a result of your web site. One other thing I’d like to say is always that newer computer system os’s often allow a lot more memory to use, but they as well demand more ram simply to function. If a person’s computer is not able to handle extra memory plus the newest software program requires that memory increase, it is usually the time to shop for a new PC. Thanks

spoken by: Chauncey Frullate

date: August 22nd, 2012

Thank you very much for this awesome code! I noticed one thing, when I open the modal popup and then close it using the close/closeModal events, links that call window.open(…) script are not executing anymore. It happens with the links that are in the same page where the modal popup is called. Anyone experienced the same thing?

spoken by: don

date: September 13th, 2012

VERY excellent. thank you.

spoken by: kris

date: September 25th, 2012

Thank you for this awesome script. One thing I am noticing, when I hit the close button, it closes out the entire tab instead of just the modal window. Is there a way to change this behavior?

spoken by: Ced

date: October 18th, 2012

Getting a 404 error when trying to download the source zip file. Went your original post and could find the files from the example directory referenced in the code, i.e. the modal.html and the close-button.png. How can I get copies of those files?

spoken by: SSN651

date: November 5th, 2012

Good Job for IE 9 defect

spoken by: Sumit

date: November 21st, 2012

Hi, This is an awesome script. Thanks.

I just want to add an additional functionality, I want to reload the parent page when the iframe window closes. But the reloading is also conditional, I am passing a certain querystring parameter that indicates that the parent page should reload after close.
I tried to insert the script in the close function of the iframe but since the instatiation of the iframe window happens only once the value of the querystring is always undefined.

Any ideas?

Thank you very much.

spoken by: Ais

date: December 17th, 2012

you are obviously one of those that hasn’t managed to keep up with things, so i’ll enlighten you, its no longer global warming due to the fact it isn’t actually warming but its now climate change and seeing as yesterday is different from today, please put my taxes. Now sort yourself out and get with the programme!!

spoken by: 26 inch brazilian weave

date: March 6th, 2013

This is not working in IE 9 or above…
Any possible solution.

spoken by: jamil

date: April 30th, 2013

body marginwidth=”0″ marginheight=”0″ leftmargin=”0″ topmargin=”0″ onload=”$(this).modal({width:1000, height:550}).open(); return false;”

spoken by: Mark

date: April 10th, 2014

This script is not working with
//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js

any idea please..

spoken by: dinesh

date: April 25th, 2014

At this time it appears like BlogEngine is the best blogging platform available right now.
(from what I’ve read) Is that what you’re using on your blog?

spoken by: pine tar tickle

date: May 10th, 2014

My coder is trying to persuade me to move to .net from PHP.
I have always disliked the idea because of the expenses.

But he’s tryiong none the less. I’ve been using Movable-type on several websites for about a year and
am anxious about switching to another platform.
I have heard good things about blogengine.net. Is there a way I can transfer all
my wordpress content into it? Any kind of help would be greatly
appreciated!

spoken by: car hire edinburgh airport free additional driver

date: May 13th, 2014

Fixed On IE :

1 – In modal-window.js change :
1.
$.modal.close = function () { modal.close(); }
TO :
$.modal.closeModal = function () { modal.closeModal(); }

2. Find This Line :
this.closeModal = function () {
jQuery(‘.’ + options.modalClassName + ‘, .’ + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
}

and Change to :

this.closeModal = function () {
jQuery(‘.’ + options.modalClassName + ‘, .’ + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).remove().unbind(); });

On top line just changed :
jQuery(this).remove().unbind();

and on page find :
onclick=”parent.$.modal().close();”
and change to :
onclick=”window.parent.$.modal().closeModal();”

spoken by: Masoud

date: June 4th, 2014

Hi there would you mind sharing which blog platform you’re working with?
I’m planning to start my own blog in the
near future but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your layout seems
different then most blogs and I’m looking for something unique.
P.S Apologies for getting off-topic but I had to ask!

Here is my web page … best vapor cigarette product (http://www.redappledating.com/)

spoken by: http://www.redappledating.com/

date: July 31st, 2014

Once melted add the cocoa butter and stir until just melted.
You can almost think of your skin as a window into the health of your entire body.

Stay away from heavy drinking to keep your skin looking younger,
longer.

spoken by: articles of faith talmage

date: July 31st, 2014

Compared to popular 2-piece bikinis or backless
swimsuits, modest swimwear covers much more skin, yet still delivers
a lot of style. If you want to take great shots from
a party, for example, you need take more time in watching people than in participating.
Leave a little something to the girls’ imagination.

spoken by: peixoto bella

date: August 4th, 2014

The Luxembourg Gardens are the Parisian version of London’s Hyde Park and NYC’s
Central Park. Another thing to try on the next batch
will be to flavor cookies with a vanilla bean, rather than extract.
Recently, Chef Bellanger explained to me, “When we started Mad Mac in 2006, cupcakes were the thing, they were exploding,”
he explains, “like macarons had done in France years before.

spoken by: Dyan

date: August 5th, 2014

I hope you enjoy them and can adapt them to your families needs or as gifts.
Fun and bizarre gifts are a great way to acknowledge fun loving
and humorous friends, family and coworkers. The Honey Baked Ham Company offers both hams
and turkeys that will feed a dinner party.

spoken by: cadou pentru iubit

date: August 5th, 2014

A guitar strings also come in different colors on top of that.
Some use money to devote to a charitable cause to make the world a better place to live.

They leave little to the imagination of those who can see
it because it covers a bare minimum of the wearer’s body.

spoken by: http://www.pinterest.com/BikiniLuxe/bikiniluxe-inspiration-board

date: August 7th, 2014

For instance having a nice tan on your face will hide things like
wrinkles and blemishes. Use the comments section below to let us know what you liked and what just didn’t work for you.
Also apply the tanner on the earlobes and upper ears.

spoken by: kt2.de

date: August 10th, 2014

On site SEO to make money online always starts with keyword
research. So, why shouldn’t you be cashing
in too inside online money making industry, well that is because you do
not know the techniques to success yet. I’ll give you the simple sample that could increase your trafic.

spoken by: make money eaily

date: August 10th, 2014

Channel lock plumbers pliers are a necessity for this
job. These leaks and backups can pose severe threats to your property.
You can define your location as broad as a large city such as
New Jersey or you can enter your precise address.

spoken by: jacksonville septic tank service

date: August 12th, 2014

Aw, this was an extremely good post. Taking a few minutes and actual effort to make a top
notch article… but what can I say… I procrastinate a whole lot and don’t manage to get anything
done.

spoken by: váy đầm nữ phong cách phong cách

date: August 13th, 2014

To deny you is to deny the Spark of Divinity within your
heart center. These are however the greatest movie
that I can remember so far. You’ll certainly need to use all the tools at your disposal to deal with the different types of zombies you encounter.

spoken by: Story Tapes

date: August 17th, 2014

Aw, this was an extremely nice post. Spending some time and actual effort to make a really good article… but what can I say… I hesitate a lot and never
seem to get nearly anything done.

spoken by: teleski cable wake system

date: August 18th, 2014

Hi there Dear, are you truly visiting this site on a regular basis,
if so after that you will definitely obtain nice knowledge.

spoken by: Croatia festivals 2014. Croatia festivals 2015

date: August 20th, 2014

I blog quite often and I truly thank you for your content.
This great article has really peaked my interest.
I am going to take a note of your blog and keep checking for new details about once
a week. I opted in for your RSS feed too.

spoken by: white romper playsuit

date: August 21st, 2014

I was very happy to find this page. I need to to thank you for
ones time for this wonderful read!! I definitely enjoyed every
part of it and I have you saved as a favorite to see new stuff in your web site.

spoken by: Paleo recepten

date: August 22nd, 2014

I’m gone to tell my little brother, that he should also go to see this website on regular basis to obtain updated from latest
gossip.

spoken by: youtube.com

date: August 24th, 2014

My family all the time say that I am wasting my time here at web,
however I know I am getting experience every day
by reading thes nice articles.

spoken by: oferte calculatoare

date: August 24th, 2014

Hello! I know this is kinda off topic however , I’d figured I’d ask.
Would you be interested in exchanging links or maybe guest writing a blog post or vice-versa?
My website goes over a lot of the same topics as yours and I
feel we could greatly benefit from each other.

If you happen to be interested feel free to shoot me
an e-mail. I look forward to hearing from you! Wonderful blog by the way!

spoken by: huse iphone

date: August 25th, 2014

This is very attention-grabbing, You’re a very professional blogger.
I have joined your feed and look forward to in quest of extra of your great post.
Additionally, I’ve shared your website in my social networks

spoken by: Gavin

date: August 29th, 2014

Great site. Plenty of helpful info here.
I’m sending it to several friends ans additionally sharing in delicious.

And certainly, thank you on your sweat!

spoken by: buy a new car

date: August 31st, 2014

What’s Going down i am new to this, I stumbled upon this I’ve found It absolutely useful and
it has aided me out loads. I am hoping to give a contribution & assist other customers like its aided me.
Good job.

spoken by: VigRX male supplementation

date: September 6th, 2014

I have read so many content about the blogger lovers except this paragraph is actually
a pleasant article, keep it up.

spoken by: http://youfuckporn.com

date: September 8th, 2014

Yes! Finally someone writes about gold bullion account.

spoken by: gold savings account

date: September 14th, 2014

My relatives always say that I am killing my time here at net, but I know I am getting know-how
daily by reading thes fastidious articles or reviews.

spoken by: Felisha

date: September 14th, 2014

Hello! Do you know if they make any plugins to safeguard against
hackers? I’m kinda paranoid about losing everything
I’ve worked hard on. Any suggestions?

spoken by: www.bikiniluxe.com

date: September 18th, 2014

Your goal is to breed all the different dragons available to you and enter combat against other player’s dragons. aeefdgkebeaddeek

spoken by: Smithe7

date: September 21st, 2014

Tremendous things here. I’m very happy to look your
article. Thanks so much and I am having
a look forward to contact you. Will you please drop me
a mail?

spoken by: www.youtube.com

date: September 29th, 2014

It’s awesome to go to see this website and reading the vews of all
mats concerning this piece of writing, while I am also zealous of getting
familiarity.

spoken by: nypress.com

date: October 3rd, 2014

Hurrah, that’s what I was searching for, what a
stuff! present here at this blog, thanks admin of this website.

spoken by: fact-finder.com

date: October 4th, 2014

Link exchange is nothing else however it is simply placing the other person’s web site link on your page at
appropriate place and other person will also do similar in support of you.

spoken by: Heath

date: October 6th, 2014

Fantastic beat ! I would like to apprentice even as you amend
your website, how could i subscribe for a blog website?
The account helped me a acceptable deal. I had been a little
bit familiar of this your broadcast offered bright clear concept

spoken by: letsplay

date: October 8th, 2014

This website was… how do I say it? Relevant!! Finally I have found something which helped me.
Many thanks!

spoken by: http://youtu.be/

date: October 8th, 2014

Greate pieces. Keep posting such kind of info on your
page. Im really impressed by it.
Hi there, You have performed an incredible job. I will certainly digg it and in my view recommend to my friends.
I’m confident they will be benefited from this site.

spoken by: Eden

date: October 9th, 2014

Excellent, what a webpage it is! This webpage provides useful facts to us,
keep it up.

spoken by: new orleans in fishing

date: October 10th, 2014

Nice post. I learn something totally new and challenging on websites I stumbleupon on a daily basis.

It’s always helpful to read articles from other authors and use
a little something from their websites.

spoken by: UK Drivers License

date: October 14th, 2014

It’s actually a great and useful piece of info. I am satisfied that you
shared this useful information with us. Please stay us up to date like this.
Thank you for sharing.

spoken by: tai jewelry collection

date: October 15th, 2014

Link exchange is nothing else but it is simply placing the other person’s webpage link on your page at proper place
and other person will also do similar in support of you.

spoken by: Click Here

date: October 18th, 2014

I do not know if it’s just me or if perhaps everyone else experiencing problems with
your website. It looks like some of the text on your posts are running
off the screen. Can somebody else please comment and
let me know if this is happening to them as well?

This might be a issue with my browser because I’ve had
this happen previously. Many thanks

spoken by: jeans auf rechnung

date: October 19th, 2014

It’s awesome to go to see this site and reading the views
of all colleagues on the topic of this article,
while I am also keen of getting experience.

spoken by: haine online tari

date: October 20th, 2014

Thanks for any other informative site. The place else may I
am getting that type of information written in such an ideal means?
I have a venture that I am just now working on, and I have been on the glance out
for such information.

spoken by: gradinita particulara iasi

date: November 14th, 2014

I savour, result in I discovered just what I was taking
a look for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day.
Bye

spoken by: www.amazon.com

date: November 19th, 2014

I’m gone to tell my little brother, that he should also visit this weblog on regular basis to take updated from latest reports.

spoken by: bt1.us

date: November 19th, 2014

I have been exploring for a little for any
high-quality articles or blog posts in this kind of house .
Exploring in Yahoo I finally stumbled upon this
website. Reading this information So i’m glad to express that I have
a very good uncanny feeling I found out exactly
what I needed. I so much certainly will make certain to don?t overlook this website and give it a glance on a relentless
basis.

spoken by: Dallas

Leave a Reply

Oct 21 2009