jQuery Modal Plugin by Eric Martin

This post has been migrated from www.experimentsincode.com, we apologise if some of the images or content is missing

This post has been migrated, original date 02 Apr 2009 I was working on a project that required a modal popup up box. After looking at a few different jQuery pluyins I decided to use Simple Modal by Eric Martin. I wanted to use this one because it was the simplest to implement. The popup itself had to contain an ASP.NET text box and a button, the user would fill out the text box and then click the button and the value would be saved. As with most standard ASP .NET  sites I had to have a form that wraps the majority of the page, I am not a fan of this but sometimes there is no way around this, it also wrapped the my textbox and button but  was outside of the modal container. Once the page was setup I tried the tool but whenever I clicked the button nothing was saved to the DB. It turns out that the Simple Modal plugin appends the modal container to the end of the body tag, this cause the textbox to be moved outside of the form. Any data entered is therefore not submitted back to the server. To solve this I downloaded the non-compressed version of the code from http://code.google.com/p/simplemodal/downloads/list. Then located the lines that create the modal container. You are looking for the create function:

create: function () {
			// get the window properties

			w = this.getDimensions();

			// add an iframe to prevent select options from bleeding through
			if (ie6) {

				this.dialog.iframe = $('<iframe src="javascript:false;"></iframe>')
					.css($.extend(this.opts.iframeCss, {
						display: 'none',
						opacity: 0,
						position: 'fixed',
						height: w[0],
						width: w[1],
						zIndex: this.opts.zIndex,
						top: 0,
						left: 0
					}))
					.appendTo('body');
			}

			// create the overlay
			this.dialog.overlay = $('<div>&nbsp;</div>')
				.attr('id', this.opts.overlayId)
				.addClass('simplemodal-overlay')
				.css($.extend(this.opts.overlayCss, {
					display: 'none',
					opacity: this.opts.opacity / 100,
					height: w[0],
					width: w[1],
					position: 'fixed',
					left: 0,
					top: 0,
					zIndex: this.opts.zIndex + 1
				}))
				.appendTo('body');

			// create the container
			this.dialog.container = $('<div>&nbsp;</div>')
				.attr('id', this.opts.containerId)
				.addClass('simplemodal-container')
				.css($.extend(this.opts.containerCss, {
					display: 'none',
					position: 'fixed',
					zIndex: this.opts.zIndex + 2
				}))
				.append(this.opts.close
					? $(this.opts.closeHTML).addClass(this.opts.closeClass)
					: '')
				.appendTo('body');

			this.setPosition();

			// fix issues with IE
			if (ie6 || ieQuirks) {
				this.fixIE();
			}

			// hide the data and add it to the container
			this.dialog.container.append(this.dialog.data.hide());
		},

To solve this problem the modal container needs to be append to the parent of the target container. To do this add the following line at the start of the create function:

var parent  = $(this.dialog.parentNode);

Now replace all the:

.appendTo('body');

with:

.appendTo(parent);

This ensures that the modal container is created beneath the form element in the pa