0

我正在为我的网络应用程序开发一个登陆页面，并且我正在使用我构建的某种模式框。它使用一些 jQuery 来显示框本身和覆盖。同一页面上有 3 个模式框，您可以使用每个框的一个链接打开它们。

我的代码工作得非常好（尽管它看起来很重[我不是 Javascript 方面的专家，但我总是尽可能多地尝试一下]）。但是当我关闭模态框时，覆盖层会按预期滑出，但动画会重复 3 次（可能是因为 3 模态框的代码）。

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

这是 jsFiddle 供您玩 :) → http://jsfiddle.net/EY59T/（该错误并不真正可见，您只能看到覆盖需要一段时间才能摆脱）

我已经尝试过 .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 键上。

4

2 回答 2

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，你会看到它:)

于 2012-12-09T11:32:58.163 回答
0

问题是您为打开的每种模型绑定了三次关闭处理程序。但是您将它们绑定在相同的元素上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 个链接，id并将 ios 链接更改为modal-open-ios与其他两个链接一致，因此我们可以轻松提取我们想要打开的弹出窗口..

演示在http://jsfiddle.net/EY59T/1/

于 2012-12-09T11:34:16.053 回答