JQUERY UI 模态教程
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2303038/
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
JQUERY UI Modal Tutorial
提问by AnApprentice
Can anyone provide a clean example of how to use JQUERY's UI Modal dialog. Surprisingly it's not as simple as you would think.
任何人都可以提供一个干净的示例，说明如何使用 JQUERY 的 UI 模态对话框。令人惊讶的是，这并不像你想象的那么简单。
Goal:
目标：
clicking an element loads a modal
The modal appears showing "Loading..." And then makes an ajax call to get the contents of the modal
The modal can be closed by clicking a close btn or by pressing escape
The modal can be repopened, and when it's reopened it doesn't show the state of the previous modal interaction.
单击一个元素加载一个模态
模态出现显示“正在加载...”然后进行ajax调用以获取模态的内容
可以通过单击关闭 btn 或按 Esc 键来关闭模式
模态可以重新打开，当它重新打开时，它不会显示前一个模态交互的状态。
Thanks!
谢谢！
Here is what I currently am doing, but it works very clumsy and doesn't seem at all like a smart solution. Ideas?
这是我目前正在做的事情，但它的工作非常笨拙，看起来一点也不像一个聪明的解决方案。想法？
var $dialog = $('<div id="sharerdialog"></div>')
.html('<p>Loading...</p>')
.dialog({
autoOpen: false,
title: 'Share the item',
position: ['center',150],
width: 450,
focus:function(event, ui) {
$('#dialogcloser').click(function() {
$dialog.dialog('close');
});
},
open: function(event, ui) {
var title2use = document.title;
title2use = escape(title2use);
$("#sharerdialog").load("/items/ajax/share/index_beta.cfm?itemid=#itemID#&itemtitle=" + title2use);
}
});
// Bind the Share btn to Open the Modal
$('#itemshare').click(function() {
$dialog.dialog('open');
});
回答by guzart
The main problem I see with your code, is that you are not adding the dialog to the DOM, therefore, the browser won't display it. My suggestion is that you first try:
我在您的代码中看到的主要问题是您没有将对话框添加到 DOM，因此浏览器不会显示它。我的建议是你首先尝试：
var $dialog = $('<div id="sharedialog"></div>')
.html('<p>Loading....</p>')
.appendTo('body')
.dialog({...});
So that you added it to the DOM, and the browser can display it.
这样你就可以将它添加到 DOM 中，并且浏览器可以显示它。
回答by the0bone
Why so complex?
为什么这么复杂？
$(function() {
$("#itemshare").click(function() {
$("#sharerdialog").dialog().load("/items/ajax/share/index_beta.cfm");
return false;
});
});
You can chain it uo in jquery. And in the HTML just have a empty div with the id sharerdialog. May style it hidden
您可以在 jquery 中链接它。在 HTML 中，只有一个带有 id sharerdialog 的空 div。可以隐藏样式
style="display: none;"
But thats it
但就是这样
