Помогите с модальным окном jquery - PullRequest
Новая
       24

Помогите с модальным окном jquery

0 голосов
/ 06 октября 2009

В рамках моих усилий по изучению jquery я создаю свое собственное модальное окно. Пока все выглядит хорошо, но я просто не могу нажать на оверлей, чтобы запустить закрытие. У кого-нибудь есть идеи, почему?

Вы можете проверить это на jsbin здесь - http://jsbin.com/irado

Вот мой сценарий: 

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

});

Ответы [ 2 ]

1 голос
/ 06 октября 2009

Причина проблемы в том, что вы пытаетесь прикрепить событие click к оверлею еще до его появления. Попробуйте переместить привязку события click внутри события click элемента «.open», поскольку именно здесь вы добавляете «#overlay» к телу.

Попробуйте это: 

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

 });

});

0 голосов
/ 06 октября 2009

Использование jQuery Dialog может быть намного проще. Он поставляется с «модальным» флагом, который вы можете использовать. Проверьте это.

...