我有这样的链接,我想打开它的内容并使用以下代码显示它:
<a class="uimodal" href="/Administration/Contact">Contact</a>
如何让该链接打开href内容并在jQuery UI模式对话框中显示?
答案 0 :(得分:7)
最好的方法是使用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(//...)
。
答案 1 :(得分:5)
我在不使用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/
答案 2 :(得分:1)
您必须创建一个iframe并在对话框中打开它。
因此,像
jQuery('<iframe/>').attr('src', jQuery('.uimodal').attr('href')).dialog('open');
更详细: jQuery UI对话框()只能显示DOM元素,您必须先向DOM添加一些显示URL的内容。
答案 3 :(得分:0)
在此代码对话框中,大小和标题在链接
中声明
<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>