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

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

感谢马克花时间研究这个问题并指出重复函数。您的解决方案没有完全按预期工作，因为链接引用了当前页面而不是外部链接本身。我仍然需要将所有其他功能与单击关联起来。我没有对代码进行太多更改，而是通过在 .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