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

【问题标题】：How do I open a page's content from an Href link to display it inside a JQuery UI Dialog?如何从 Href 链接打开页面内容以在 JQuery UI 对话框中显示它？
【发布时间】：2010-11-25 15:17:15
【问题描述】：

我有一个这样的链接，我想打开它的内容并使用下面的代码显示它：

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

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

最好的方法是使用 Ajax 加载操作将内容检索到新元素中。然后在加载数据时，调用该元素上的模式：

$('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 页面时显示模式，方法是在调用 load 方法之前输入outputHolder.dialog(//...)。

【讨论】：

我试过你的代码...但是链接会打开一个模态，然后在新页面中加载内容...
糟糕，已编辑。忘记将return false; 添加到点击事件的末尾。这是防止点击传播所必需的。

【解决方案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/

【讨论】：

【解决方案3】：

您必须创建一个 iframe 并在您的对话框中打开它。

因此，类似

jQuery('<iframe/>').attr('src', jQuery('.uimodal').attr('href')).dialog('open');

更详细： jQuery UI dialog() 只能显示 DOM 元素，您必须先向显示 URL 的 DOM 添加一些内容。

http://jqueryui.com/demos/dialog/

【讨论】：

【解决方案4】：

在此代码中，对话框的大小和标题在链接中声明

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

【讨论】：