CODEWITHSUNDEEP
jquerymodal-dialog
Marlon Creative
Marlon Creative

Reputation: 3846

Help with a jquery modal window

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()} )
});

});

Upvotes: 0

Views: 1507

Answers (2)

Tim Banks
Tim Banks

Reputation: 7189

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()} )
  });

 });

});

Upvotes: 1

psychotik
psychotik

Reputation: 39029

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

Upvotes: 0

Related Questions