Question

我有以下函数可以将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;
        });
    });
});

虽然click事件只是转到链接而不是将外部页面加载到模态对话框中，但会发生什么。所有必需的jQuery和jQuery UI库都包含在Google jQuery存储库中并链接在一起。从我所看到的和我见过的例子开始，我应该这样做。

我也尝试过使用

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

和

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

提前致谢

Answer 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内提供的链接。如果您不阻止该默认操作，它将会去那里。

Answer 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以打开对话框？

Answer 3

尝试：

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

如果失败，请看看：

Opening External URL in JQuery UI Dialog on Wordpress page

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

3 个答案: