Question

我有一个重叠，弹出并通过删除和添加我的.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中遇到了问题。

Answer 1

尝试：

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

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

请参阅：Why is setTimeout(fn, 0) sometimes useful?

覆盖不会在正确的时间消失 - 可能是jQuery问题

1 个答案: