jQuery对话框：如何使用？

Question

我正在学习如何使用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”，以便它可以基于不同的链接显示不同的内容？ 例如，添加“打开1”和“打开2”以显示不同的字符串？

Answer 1

对话框是jQuery UI的一部分。 您还必须包括它。

Answer 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/

从这里下载JqueryUI

编辑：动态对话框内容添加到代码

Answer 3

该对话框位于JQuery UI中，您只需要JQuery。 在开头插入：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Answer 4

添加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>

jQuery对话框：如何使用？

问题描述

4 个解决方案

解决方案1
3 2014-01-14 20:55:44

解决方案2
3 已采纳 2014-01-14 20:58:29

解决方案3
1 2014-01-14 20:57:40

解决方案4
1 2014-01-14 20:58:08

jQuery对话框：如何使用？

问题描述

4 个解决方案

解决方案1 3 2014-01-14 20:55:44

解决方案2 3 已采纳 2014-01-14 20:58:29

解决方案3 1 2014-01-14 20:57:40

解决方案4 1 2014-01-14 20:58:08

解决方案1
3 2014-01-14 20:55:44

解决方案2
3 已采纳 2014-01-14 20:58:29

解决方案3
1 2014-01-14 20:57:40

解决方案4
1 2014-01-14 20:58:08