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

Question

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

像Dialog + Ajax一样

谢谢

Answer 1

如果要使用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');

点击这里查看示例.

Answer 2

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

有些情况下,为现有页面添加标记只是为了创建一个对话框 - 特别是如果内容由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');
});