Help with a jquery modal window

Question

Hi All

As part of my efforts to learn jquery, I'm making my own modal window. Everything seems fine so far, but I just can't get clicking on the overlay to fire the close. Anyone any ideas why?

You can check it on jsbin here - http://jsbin.com/irado

Here's my script:

var $j = jQuery.noConflict();
$j(document).ready(function () {
// Pause Function
    $j.fn.pause = function(duration) {
    $j(this).animate({ dummy: 1 }, duration);
    return this;
}; 
// Add our click ON event
$j(".open").click(function () {
// IE6 select box iframe hack
if (jQuery.browser.msie) {
if(parseInt(jQuery.browser.version) == 6) {
  $j('body').prepend('<iframe style="z-index: 999; width:100%; height:100%; filter: alpha(opacity=0); left: 0px; zoom: 1; position: absolute; top: 0px;"  src="javascript:false;"></iframe>');
}};
// Add our overlay div
$j('body').prepend('<div id="overlay" />');
// Fade in overlay
$j('#overlay').animate({"opacity":"0.2"}, 300),
// Animate our modal window into view
$j('#window').css({"top":"45%"}).pause(200).css({"opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 300)
});
  // Add our click OFF event
$j('a.close, #overlay').click(function () {
 //Animate our modal window out of view
$j('#window').animate({"top": "55%", "opacity": "0"}, 300).fadeOut(200),
// Fade out and remove our overlay
$j('#overlay').pause(500).fadeOut(200, function () { $j(this).remove()} )
});

});

Answer 1

Using jQuery Dialog might be much easier. It comes with a 'modal' flag you can use. Check it out.

Answer 2

The reason there is a problem is because you are trying to attach the click event to the overlay before it even exists. Try moving the binding of the click event inside the click event of the ".open" element since that is where you are prepending the "#overlay" onto the body.

Try this:

var $j = jQuery.noConflict();
$j(document).ready(function () {
// Pause Function
    $j.fn.pause = function(duration) {
    $j(this).animate({ dummy: 1 }, duration);
    return this;
};      
// Add our click ON event
$j(".open").click(function () {
// IE6 select box iframe hack
if (jQuery.browser.msie) {
    if(parseInt(jQuery.browser.version) == 6) {
      $j('body').prepend('<iframe style="z-index: 999; width:100%; height:100%;       filter:alpha(opacity=0); left: 0px; zoom: 1; position: absolute; top: 0px;"    src="javascript:false;"></iframe>');
}};
// Add our overlay div
$j('body').prepend('<div id="overlay" />');
// Fade in overlay
$j('#overlay').animate({"opacity":"0.2"}, 300),
// Animate our modal window into view
$j('#window').css({"top":"45%"}).pause(200).css({"opacity":"0"}).show().animate({"top":   "50%", "opacity": "1"}, 300)

  // Add our click OFF event
  $j('a.close, #overlay').click(function () {
  //Animate our modal window out of view
  $j('#window').animate({"top": "55%", "opacity": "0"}, 300).fadeOut(200),
  // Fade out and remove our overlay
  $j('#overlay').pause(500).fadeOut(200, function () { $j(this).remove()} )
  });

 });

});