jQuery对话框：如何使用？
[英]jQuery dialog: How to use?
问题描述
I am learning how to use jQuery dialog. 
我正在学习如何使用jQuery对话框。 One link I found helpful is http://imperavi.com/redactor/examples/uidialog/ . 我发现有帮助的一个链接是http://imperavi.com/redactor/examples/uidialog/ 。 The code is listed below, but I don't know why it does not work. 该代码在下面列出，但是我不知道为什么它不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p><a href="javascript:void(null);" onclick="showDialog();">Open</a></p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show. 添加jquery-ui和css之后，对话框出现，但是“ Lorem ...”不显示。
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? 还有一件事...是否可以将字符串传递给“ showDialog”，以便它可以基于不同的链接显示不同的内容？ For example, adding "Open 1" and "Open 2" to show different string? 例如，添加“打开1”和“打开2”以显示不同的字符串？
4 个解决方案
解决方案1
3 2014-01-14 20:55:44
解决方案2
3 已采纳 2014-01-14 20:58:29
I think, you forgot to add jquery UI. 我认为，您忘记添加jquery UI。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p><a href="javascript:void(null);" onclick="showDialog('Lorem ipsum dolor');">Open</a></p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/ 这是工作提琴： http : //jsfiddle.net/bY3F4/3/
Download JqueryUI from here 从这里下载JqueryUI
Edit: Dynamic dialog content added to code 编辑：动态对话框内容添加到代码
解决方案3
1 2014-01-14 20:57:40
the Dialog is in the JQuery UI, you only required the JQuery. 该对话框位于JQuery UI中，您只需要JQuery。 insert this in the beginning: 在开头插入：
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
解决方案4
1 2014-01-14 20:58:08
Add jQuery UI Stylesheet 添加jQuery UI样式表
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI 添加jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.