Question

我试图避免使用jquery-ui或simple-modal或任何插件。

我所追求的功能是点击任何外部链接，显示包含是和否按钮的隐藏div。如果用户单击“是”，则会将其转到新窗口。

我的问题是，这几乎可以工作，但是如果用户再次点击链接返回到原始页面，则会在两个选项卡中打开相同的链接，如果重复链接，则会在三个选项卡中打开等。

<div id="overlay">
<div class="decoration">            
            <div class="overlay-content">
                <a href="#" class="close">X</a>
                <h1>You are now leaving the  website</h1>
                <p>This link will take you to a website where this Privacy Policy does not apply.</p>
                <p><strong>Select OK to continue.</strong></p>
                <a href="#" class="ok">OK</a>
                <a href="#" class="cancel">CANCEL</a>
            </div>
        </div>

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function (event) {

    var href_ext = $(this).attr("href");                             

    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});       

    $('#overlay .ok').live('click', function () {           
        window.open(href_ext);
        $('#overlay').hide();
        return false;
    });
    $('#overlay .close, #overlay .cancel').live('click', function () {                      
        $('#overlay').fadeOut(500);         
    });
    event.preventDefault();
});

以下是http://jsbin.com/apekik/7

所发生情况的示例

Answer 1

每次单击链接时，都会再次调用该函数。每次调用该函数时，live都会在所有链接上注册另一个回调，因此当用户最后单击“确定”时，将重复调用window.open函数。此外，fadeOut被多次调用，但效果只是隐藏，因为它正逐渐淡出。

因此，我们将.ok，.close和.cancel的代码移至链接点击处理程序之外，并将live更改为click应该没事。

$('#overlay .ok').click(function (event) {   
     var href_ext = $(this).attr("href");          
     window.open(href_ext);
     $('#overlay').hide();
     return false;
});

$('#overlay .close, #overlay .cancel').click(function () {                      
    $('#overlay').fadeOut(500);         
});

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").click(function (event) {
    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});       
    event.preventDefault();
});

Answer 2

感谢Mark花时间研究这个并指出重复功能。您的解决方案没有按预期工作，因为链接引用当前页面而不是外部链接本身。我仍然需要将所有其他功能与点击相关联。我没有太多地改变我的代码并通过在.live（）之前添加.die（）来解决它，这会阻止你提到的重复功能。

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function (event) {
event.preventDefault();

    var href_ext = $(this).attr("href");                                 

    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});       

    $('#overlay .ok').die().live('click', function () {           
        window.open(href_ext);
        $('#overlay').hide();
        return false;
    });

    $('#overlay .close, #overlay .cancel').click(function () {                      
        $('#overlay').fadeOut(500);         
    });
});

工作解决方案：http://jsbin.com/apekik/14

Jquery模态对话框确认 - 新窗口倍增

2 个答案: