Question

我正在为我的网络应用程序着陆页面，我正在使用我构建的某种模态框。它使用一些jQuery来显示框本身和叠加层。在同一页面上有3个模式框，您可以打开每个框的一个链接。

我的代码工作得很好（即使它看起来很重[我不是Javascript中的专家，但我总是尽可能多地尝试]）。但是当我关闭模态框时，叠加层会滑出它应该做的但是动画会重复3次（可能是因为3模态框的代码）。

所以，我的代码在那里完全在线→http://graphix.net23.net/app/

这是你玩的jsFiddle :)→http://jsfiddle.net/EY59T/（这个bug实际上看不到，你只能看到叠加需要一段时间才能逃脱）

我已经尝试过.stop（）函数了。它可以在您显示第一个模态时解决问题，但在您单击另一个模态后，叠加层不会出现。

看看我沉重的代码：

// iOS Modal
$("a#modal-open").click(function () {
      $("div#modal-ios").show("fade", 600);
      $("div.modal-overlay").show("slide", 300);
      $(".app h4").hide("fade", 300);
      $("div.app").animate({backgroundPositionY:-120}, 600);
      return false;
});
$("a#modal-done,div.modal-overlay").click(function () {
      $("div#modal-ios").hide("fade", 600);
      $("div.modal-overlay").hide("slide", 300);
      $(".app h4").show("fade", 600);
      $("div.app").animate({backgroundPositionY:0}, 600);
      return false;
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) {
        $("div#modal-ios,div.modal-overlay").hide("fade", 300);
        $(".app h4").show("fade", 300);
        $("div.app").animate({backgroundPositionY:0}, 600);
    }
});
// END iOS Modal
// Android Modal
$("a#modal-open-android").click(function () {
      $("div#modal-android").show("fade", 600);
      $("div.modal-overlay").show("slide", 300);
      return false;
});
$("a#modal-done,div.modal-overlay").click(function () {
      $("div#modal-android").hide("fade", 600);
      $("div.modal-overlay").hide("slide", 300);
      return false;
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) {
        $("div#modal-android,div.modal-overlay").hide("fade", 300);
    }
});
// END Android Modal
// WP Modal
$("a#modal-open-wp").click(function () {
      $("div#modal-wp").show("fade", 600);
      $("div.modal-overlay").show("slide", 300);
      return false;
});
$("a#modal-done,div.modal-overlay").click(function () {
      $("div#modal-wp").hide("fade", 600);
      $("div.modal-overlay").hide("slide", 300);
      return false;
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) {
        $("div#modal-wp,div.modal-overlay").hide("fade", 300);
    }
});
// END WP Modal

已经有两天我正在研究它仍然无法找到可行的解决方案，请帮助我：）

编辑：你可以用三种不同的方式关闭模态：点击按钮，点击叠加或ESC键。请注意，ESC键不会发生错误。

Answer 1

这种情况正在发生，因为您隐藏了叠加层3次（每个平台一次[iOS，Android，WP]）

您的代码需要一些清洁工作。您已在页面上使用了具有相同ID的多个元素（例如＃modal-close），这些元素无效，不确定是否存在其他实例。我在这里尝试做的是每个平台创建和对象，在开始时索引所有内容并从那里开始运行。

但是你可以修改你所拥有的但添加隐藏功能。我在这里嘲笑它：http://jsfiddle.net/3sz2u/1/

我已将a#modal-close更改为a.modal-close

希望这有帮助！仅在Chrome上测试

注意：由于您使用的版本，您创建的jsFiddle不会显示相同的效果。将它切换到jQuery 1.7.2，你会看到它：）

Answer 2

问题是，对于您打开的每种类型的模型，您将绑定处理程序三次。但是你绑定了相同元素a#modal-done,div.modal-overlay上的那些元素。这样，当你点击它时，它会在相同的元素上开始3次淡化并且会混淆它。

您只需要应用处理程序一次，只需在其中添加所有弹出窗口的淡入淡出。

此外，通过在您的链接中添加一个用于打开弹出窗口的公共类，您也可以在一次传递中定位这些类

这些将简化您的代码

// method to hide any open popup and the overlay
function closePopupOverlay() {
    // hide all popups - will only really work with the currently open one
    $("#modal-ios,#modal-wp,#modal-android,div.modal-overlay").hide("fade", 500);

    $(".app h4").show("fade", 500);
    $("div.app").animate({
        backgroundPositionY: 0
    }, 600);
}
$(document).on('keydown', function(e) {
    if (e.keyCode === 27) {
        closePopupOverlay();
    }
});
$("a#modal-done,div.modal-overlay").click(function() {
    closePopupOverlay();
    return false;
});
// when we click on one of the links 
$('.model-open').click(function() {
    var target = this.id.replace('-open-', '-'); // find the related popup id
    $('#' + target).show("fade", 600); // show the related popup
    $("div.modal-overlay").show("slide", 300); // show the overlay

    if (target === 'modal-ios') { // handle the special needs of the ios button
        $(".app h4").hide("fade", 300);
        $("div.app").animate({
            backgroundPositionY: -120
        }, 600);
    }

    return false;
});

html更改是我将class="model-open"添加到您的3个链接中，并将ios链接的id更改为modal-open-ios以符合其他两个，因此我们可以轻松提取我们想打开什么弹出窗口..

http://jsfiddle.net/EY59T/1/

演示

jQuery动画bug：重复

2 个答案: