jQuery 函数将页面内容加载到模态对话框中

Question

我有以下函数，应该将 div id“内容”加载到模态对话框中，以获取 id 为“#modal”的任何链接。

编辑

我知道 ID 必须是唯一的，但在这种情况下，实际使用此功能的任何页面上都不会重复 #modal。我什至通过指定 .modal 而不是 #modal 使 #modal 成为一个类。结果是一样的

编辑结束

// Load external content in modal
$(document).ready(function(){       
    $('#modal').on('click', function(event){
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                draggable: false,
                overflow: scroll,
                title: $link.attr('title'),
                width: $link.attr('width')
            });

        $link.click(function(){
            $dialog.dialog('open');
            return false;
        });
    });
});

但是发生的情况是，单击事件只是转到链接，而不是将外部页面加载到模态对话框中。所有必需的 jQuery 和 jQuery UI 库都包含在 Google jQuery 存储库中并链接。从我读过的内容和例子来看，我看到这应该有效。

我也尝试过使用

$('#modal').bind('click', function(){

和

$('#modal').click(function(){

提前致谢

Answer 1

它会转到链接，因为您没有阻止默认 anchor 行为。使用event.preventDefault

$('#modal').on('click', function(event){ // <-- modal is a link with a `href`
        event.preventDefault(); // <--
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({

具有 href 属性的 anchor - 单击时 - 转到 href 内提供的链接。如果您不阻止该默认操作，它将转到那里。