Jquery Modal dialog confirmation - new windows multiply

I'm trying to avoid using jquery-ui or simple-modal or any plugin.

The functionality I'm after is on click of any external link, reveal a hidden div containing yes and no buttons. If a user clicks yes then they are taken to a new window.

My problem is, this almost works, with the exception that if a user returns to the original page if they click the link again then the same links opens in two tabs and if you repeat the link opens in three tabs etc...

<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>开发者_Go百科;
                <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();
});

Here is an example of what's happening http://jsbin.com/apekik/7

Each time that the link is clicked, the function is called again. Each time that the function is called, live registers another callback on all of the links, so when the user finally click on "OK", the window.open function will be called repeatedly. Additionally, the fadeOut is being called multiple times, but the effects are just hidden because, well, it's fading out.

So, we move the code for .ok, .close and .cancel to outside of the link's click hander, and change live to click and it should be fine.

$('#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();
});

Thank you Mark for taking the time to look into this and for pointing out the repeating function. Your solution didn't quite work as intended because the link references the current page rather than the external link itself. I still needed to associate all the other functionality with the click. I didn't change my code too much and solved it by adding .die() before .live() which prevents the repeating function you mentioned.

$("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);         
    });
});

Working solution: http://jsbin.com/apekik/14