Question

在我的项目中，我有一个页面，我需要在点击所有超链接时显示模态对话框。

弹出窗口有两个按钮图像“Continue”和“GoBack”。我写了一些我在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");
    });
    }
});
});

页面中所有超链接点击的Jquery模式对话框

1 个答案: