如何使用jquery ui对话框加载页面

StackOverflow https://stackoverflow.com/questions/1608249

  •  05-07-2019
  •  | 
  •  

题

是否可以使用jquery ui对话框加载另一个页面？

与Dialog + Ajax一样

由于

有帮助吗？

解决方案

如果要使用Ajax将内容加载到对话框中，可以轻松使用$ .load：

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

查看示例此处。

其他提示

JQuery UI对话框的设计使得它需要对现有内容进行操作。通常在示例中，这是从DOM的现有 BODY 中获取的 DIV 。

有些情况下，为现有页面添加标记只是为了创建一个对话框 - 特别是如果内容是由AJAX加载的 - 会导致问题。例如，您可能有一个可以从多个页面调用的JavaScript库，并且不希望为每个页面添加标记。

另一种方式（受此启发）在这里：

不同之处在于您以编程方式创建DIV（将自动添加到DOM中） - 当对话框关闭时我们完全销毁它 - 并在'close'事件中将其从DOM中删除。

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

如果您不希望对话框打开（并且可能闪烁），直到加载内容，请使用以下内容替换 dialog1.load（contentUrl）.dialog（'open'）; 。这也可以让它在没有额外工作的情况下正确居中。 

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

我更愿意等到我有内容来创建对话框。对我来说似乎更直截了当。此外，自动调整大小似乎不起作用：

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

当然，只需在对话框的HTML中加入iframe。

如果您特别需要或想要一个iFrame而不是将内容注入到dom中，我在此处有一个扩展名： http://plugins.jquery.com/project/jquery-framedialog

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top