我有这样的链接，我想打开其内容并使用下面的代码显示它：
<a class="uimodal" href="/Administration/Contact">Contact</a>
如何使该链接打开href内容并将其显示在jQuery UI模式对话框中？
最好的方法是使用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页面时通过在调用load方法之前放置outputHolder.dialog(//...)来显示模式。
我在不使用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/
您必须创建一个iframe，然后在对话框中将其打开。
因此，类似
jQuery('<iframe/>').attr('src', jQuery('.uimodal').attr('href')).dialog('open');
更详细：jQuery UI dialog（）仅能显示DOM元素，您必须首先在DOM中添加一些显示URL的内容。
在此代码对话框的大小和标题在链接中声明
<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>