頁面上所有超鏈接的jQuery模式對話框

Question

在我的項目中，我有一個頁面，我需要在該頁面上單擊所有超鏈接來顯示模式對話框。

彈出窗口有兩個按鈕“繼續”和“返回”。 我寫了一些在此Stackoverflow網站上找到的jquery。 但是代碼有問題。

假設我在此頁面中有5個超鏈接。 當我單擊第一個鏈接時，將打開對話框，而當我單擊繼續時，將正確打開鏈接。

但是，當我單擊第二個鏈接時，再次打開了第一個鏈接和第二個鏈接這兩個單獨的窗口，這是錯誤的，它應該只打開第二個鏈接。

當我再次單擊第三個鏈接時，它將在3個窗口中打開第一個，第二個和第三個鏈接。

我猜我在代碼中犯了一個小錯誤。 如果有人幫助我解決此問題，我非常感謝。

感謝您的幫助。 這是我的jQuery代碼：

<script type="text/javascript">
<!-- Loading Modal Dialog Popup-->
$(document).ready(function() {
    //  $(".leaving-the-site-container").hide(); 
    $(".linkdialog").click(function(e){
        e.preventDefault();                            
        var targetUrl = $(this).attr("href");                     
        alert(targetUrl);

        $(".leaving-the-site-container").dialog({        
            width:452,
            // autoOpen:false,
            // height:225,
            modal:true,
            closeOnEscape:false,
            draggable:false,
            scrollbars:false,
            position: ["center", 240]
        });                                                      

        $("#btnContinue").click(function(){                            
            window.open(targetUrl);
            $(".leaving-the-site-container").dialog("close");                                                                         
        }); 
        $("#btnTakeMeBack").click(function(){
            $(".leaving-the-site-container").dialog("close");
        });
    });
});
</script>

Answer 1

您的代碼不正確。 這將起作用：

$(document).ready(function() {

$(".linkdialog").click(function(e){
    e.preventDefault();
    $('.linkdialog').removeClass('selected');
    $(this).addClass('selected');                            
    $('.leaving-the-site-container').dialog('open');
});

$(".leaving-the-site-container").dialog({        
    width:452,
    modal:true,
    closeOnEscape:false,
    draggable:false,
    scrollbars:false,
    position: ["center", 240],
        open: function() {
    $("#btnContinue").click(function(){                            
        window.open($('.selected').attr('href'));                                     
        $(".leaving-the-site-container").dialog("close");                                                                         
        }); 
            $("#btnTakeMeBack").click(function(){
        $(".leaving-the-site-container").dialog("close");
    });
    }
});
});