我正在学习如何使用jQuery对话框。我发现有用的一个链接是http://imperavi.com/redactor/examples/uidialog/。代码如下所示，但我不知道为什么它不起作用。
<!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>
添加jquery-ui和css后会出现对话框，但“Lorem ...”没有显示。
还有一件事......是否可以将字符串传递给“showDialog”，以便它可以根据不同的链接显示不同的内容？例如，添加“Open 1”和“Open 2”以显示不同的字符串？
我想，你忘了添加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>
这是工作小提琴：http://jsfiddle.net/bY3F4/3/
从here下载JqueryUI
编辑：添加到代码的动态对话框内容
Dialog在JQuery UI中，你只需要JQuery。在开头插入：
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
添加jQuery UI样式表
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
添加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>