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

is that possible to load another page with jquery ui dialog ?

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

Like Dialog + Ajax

如对话框+ Ajax

Thanks

谢谢

5 个解决方案

#1

If you want to load content into a dialog using Ajax, you can easily use $.load:

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

Check an example here.

检查一个例子。

#2

The design of the JQuery UI dialog is such that it needs existing content to operate upon. Typically in examples this is a DIV taken from the existing BODY of the DOM.

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

There are cases though where adding markup to existing pages just to create a dialog - especially if the content is loaded by AJAX - causes problems. For instance, you may have a JavaScript library that may be called from a number of pages and don't want to add markup to each one of them.

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

An alternative way (inspired by this) is here :

另一种方式(受此启发)是:

The difference being that you create the DIV programmatically (will be automatically added to the DOM) - and when the dialog closes we destroy it completely - and remove it from the DOM on the 'close' event.

不同之处在于，您可以通过编程方式创建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');
}

Replace dialog1.load(contentUrl).dialog('open'); with the following if you do not want the dialog to open (and potentially flicker) until the content is loaded. This will also allow it to be properly centered without additional work.

取代dialog1.load(contentUrl).dialog(“开放”);如果不希望对话框打开(并可能闪烁)，则使用以下命令，直到内容被加载。这也将允许它在没有额外工作的情况下正确地居中。

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

#3

I prefer to wait until I have the content to create the dialog. It seems more straightforward to me. Also, auto-sizing doesn't seem to work otherwise:

我宁愿等到有了创建对话框的内容之后。在我看来这更直接。此外，自动调整大小似乎也不起作用:

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

#4

Sure, just include an iframe in your dialog's HTML.

当然，只要在对话框的HTML中包含一个iframe就可以了。

#5

If you specifically need or want an iFrame instead of injected content into the dom, I have an extension for that here: http://plugins.jquery.com/project/jquery-framedialog

如果您特别需要或想要一个iFrame而不是将内容注入dom，我这里有一个扩展:http://plugins.jquery.com/project/jqueryframedialog

#1