1

我有以下函数应该将 div id“content”加载到模态对话框中，用于任何 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(){

提前致谢

4

3 回答 3

4

它转到链接，因为您没有阻止默认的锚行为。使用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 属性的锚点（单击时）会转到 href 内提供的链接。如果您不阻止该默认操作，它将去那里。

于 2012-10-19T20:41:25.467 回答
1

我不是 100% 确定click你在底部连接的事件是怎么回事。不过，听起来像是#modal一个a元素。链接的默认行为很可能是这里的罪魁祸首，所以添加event.preventDefault();. 我已将它添加到您的.on.

现在，我不确定第二次点击事件会做什么，因为您正在将它连接到#modal链接。

// Load external content in modal
$(document).ready(function(){       
    $('#modal').on('click', function(event){
        event.preventDefault();
        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;
        });
    });
});

modal html加载完成后，是要打开还是真的要等用户#modal再次点击打开对话框？

于 2012-10-19T20:42:40.600 回答
1

尝试：

$('#modal').on('click', function(event){
event.preventDefault();

如果失败，请尝试查看：

在 Wordpress 页面上的 JQuery UI 对话框中打开外部 URL

于 2012-10-19T20:45:37.353 回答