如何从 Href 链接打开页面内容以在 JQuery UI 对话框中显示它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4278518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I open a page's content from an Href link to display it inside a JQuery UI Dialog?
提问by Paul
I have a link like this and I want to open its content and display it using the code below:
我有一个这样的链接，我想打开它的内容并使用下面的代码显示它：
<a class="uimodal" href="/Administration/Contact">Contact</a>
How can I make that link open the href content and display it inside of a jQuery UI modal dialog?
如何让该链接打开 href 内容并将其显示在 jQuery UI 模式对话框中？
回答by bmancini
The best way is to use an Ajax Load operation to retrieve the content into a new element. Then when the data is loaded, call the modal on that element:
最好的方法是使用 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 Load: http://api.jquery.com/load/Dialog Options: http://jqueryui.com/demos/dialog/
AJAX 加载：http: //api.jquery.com/load/对话框选项：http: //jqueryui.com/demos/dialog/
Note: You could also display the modal while the AJAX page is loading by putting outputHolder.dialog(//...)prior to calling the load method.
注意：您还可以在 AJAX 页面加载时通过 putoutputHolder.dialog(//...)在调用 load 方法之前显示模式。
回答by Steven
I'm loading content in a dialog box without using IFrame. This is how I do it:
我在不使用 IFrame 的情况下在对话框中加载内容。这就是我的做法：
First you have to initilize your dialog box. You can use something like this:
首先，您必须初始化对话框。你可以使用这样的东西：
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')
});
See more info here: http://jqueryui.com/demos/dialog/
在此处查看更多信息：http: //jqueryui.com/demos/dialog/
回答by Kissaki
You'll have to create an iframe and open that in your dialog.
您必须创建一个 iframe 并在对话框中打开它。
Thus, something like
因此，像
jQuery('<iframe/>').attr('src', jQuery('.uimodal').attr('href')).dialog('open');
In more detail: The jQuery UI dialog() can only display DOM-elements, you'll have to first add something to your DOM which displays the URL.
更详细地说：jQuery UI dialog() 只能显示 DOM 元素，您必须首先向显示 URL 的 DOM 添加一些内容。
回答by hamid reza mansouri
In this code dialog size and title is declare in link
在此代码中，对话框大小和标题在链接中声明
<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>
