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

82 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/

Leave a Reply

Oct 21 2009