0

我有一个叠加层，通过删除和添加我的类，弹出和消失.hide，恭敬地。叠加层会弹出一个框，询问您是否要被定向到另一个站点。单击是，新页面在新选项卡中打开并删除覆盖，单击取消，覆盖消失，您仍然在同一页面上。当您被定向到新页面时，问题就出现了。当我从新页面回到旧页面（覆盖页面）时，覆盖仍然存在一瞬间，然后消失。

HTML：

<div id="overlay" class="hide">
    <div id="leaveOn" class="">
        <div id="leaveOn_inner">
            <div class="close"></div>
            <p>Want to leave the site?</p>
            <div id="continueBtn" class="continueButton"></div>
            <div class="cancelButton"></div>
        </div>
    </div>
</div><!--/#overlay-->

我所有的 div 都只是图像，仅供参考。如果它可以帮助您更好地理解。

jQuery：

var btnPath = "";

//link1
$("#link1").click(function () {
    $("#overlay").removeClass("hide");
    btnPath = "link1";
});
//link2
$("#link2").click(function () {
    $("#overlay").removeClass("hide");
    btnPath = "faq";
});
//link3
...
//link4
...

//close overlay
$(".close").click(function () {
     $("#overlay").addClass("hide");
 });
$(".cancelButton").click(function () {
     $("#overlay").addClass("hide");
});
$(".continueButton").click(function () {
     $("#overlay").addClass("hide");
     checkContinuePath(btnPath);
});


function checkContinuePath(btnPath) {
    if (btnPath == "link1") {
        window.open("http://link1.com", '_blank');
    } else if (btnPath == "link2") {
        window.open("http://link2.com/, '_blank');
    } else if
        ...

基本上，我告诉我的代码在单击 continueButton 时检查它应该遵循的路径/url。单击后，将类添加.hide到#overlay然后按照新选项卡上新页面的路径。

这可能是队列问题吗？在再次查看旧页面之前，我不知道如何确保覆盖消失。

更新：

当我在IE中运行它时，新页面在新窗口中打开，而不是新窗口，并且覆盖不落后。不确定这是否有帮助。我在 Chrome 和 FireFox 中遇到了问题。

4

1 回答 1

0

尝试：

$(".continueButton").click(function () {
     $("#overlay").addClass("hide");
     window.setTimeout(function() {checkContinuePath(btnPath)},0);
});

这会强制将窗口打开事件“排队”以允许当前 UI 赶上。

请参阅：为什么 setTimeout(fn, 0) 有时有用？

于 2013-07-29T20:15:47.673 回答