0

I have an overlay that pops up and disappears by removing and adding my .hide class, respectfully. The overlay brings up a box that asks if you want to be directed to another site. Click yes and the new page opens in a new tab and removes the overlay, click cancel and the overlay disappears and you remain on the same page. The issue comes when you are directed to the new page. When I go from the new page back to the old page (the overlay page) the overlay is still present for a split second before disappearing.

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-->

All my divs are just images, FYI. If it helps you understand better.

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
        ...

Basically, I'm telling my code to check which path/url it should follow if the continueButton is clicked. Upon click, add the class .hide to #overlay THEN follow the path to the new page on the new tab.

Could this be a queue issue? I have no idea how to ensure that the overlay is gone before viewing the old page again.

Update:

When I run it in IE, the new page opens in a new window, not a new window, and the overlay does not lag behind. Not sure if that helps at all. I'm experiencing the problem in Chrome and FireFox.

Timothy Adams
  • 191
  • 1
  • 1
  • 16

1 Answers1

0

try:

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

This forces the window opening event to be "queued" to allow the current UI to catch up.

See: Why is setTimeout(fn, 0) sometimes useful?

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176