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

【问题标题】：jQuery Function to load content from page into Modal Dialog将页面内容加载到模态对话框的 jQuery 函数
【发布时间】：2012-10-19 20:36:38
【问题描述】：

我有以下函数应该将 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(){

提前致谢

【问题讨论】：

ID-s 应该是唯一的！所以没有“任何带有#modal id的链接” - 让它成为一个类
我明白这一点，但在这种情况下，在实际使用此功能的任何页面上都没有重复 #modal。
如果需要复制div名称，使用classes，classes可以复制

标签： jquery jquery-ui modal-dialog

【解决方案1】：

它转到链接是因为您没有阻止默认锚行为。使用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 内提供的链接。如果您不阻止该默认操作，它就会去那里。

【讨论】：

【解决方案2】：

我不能 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;
        });
    });
});

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

【讨论】：

【解决方案3】：

试试：

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

如果失败，请尝试查看：

Opening External URL in JQuery UI Dialog on Wordpress page

【讨论】：