如何从Href链接打开页面内容以在JQuery UI对话框中显示它？

Question

我有这样的链接,我想打开它的内容并使用下面的代码显示它:

<a class="uimodal" href="/Administration/Contact">Contact</a> 

如何使该链接打开href内容并将其显示在jQuery UI模式对话框中？

Answer 1

最好的方法是使用Ajax Load操作将内容检索到新元素中.然后在加载数据时,调用该元素上的模态:

$('a.uimodal').bind('click', function() {
   var $this = $(this);
   var outputHolder = $("<div id='.uimodal-output'></div>");
   $("body").append(outputHolder);
   outputHolder.load($this.attr("href"), null, function() {
      outputHolder.dialog(// whatever params you want);
   });
   return false;
});

AJAX加载:http://api.jquery.com/load/ 对话选项:http://jqueryui.com/demos/dialog/

注意:您还可以在加载AJAX页面时通过outputHolder.dialog(//...)在调用load方法之前放置来显示模式.

Answer 2

我在不使用IFrame的情况下在对话框中加载内容.我是这样做的:

首先,您必须初始化对话框.你可以使用这样的东西:

if (jQuery("#dialog_contact").length > 0) {
    jQuery("#dialog_contact").dialog({
        title: "File browser",
        modal: true,
        autoOpen: false,
        height: 700,
        width: 800,
        closeText: 'hide',
        open: function () {
            // Here I load the content. This is the content of your link.
            jQuery("#dialog_contact").load("../wp-content/plugins/my_plugin/somPage.php", function () {});
        }
    });
}

// Then open the dialog window on click
jQuery('.uimodal').live('click', function () {
    jQuery('.dialog_contact').dialog('open')
});

在这里查看更多信息:http://jqueryui.com/demos/dialog/