Javascript jQuery对话框：如何使用？_Javascript_Jquery_Jquery Ui Dialog

Javascript jQuery对话框：如何使用？

javascript jquery

Javascript jQuery对话框：如何使用？,javascript,jquery,jquery-ui-dialog,Javascript,Jquery,Jquery Ui Dialog,我正在学习如何使用jQuery对话框。我发现有一个链接很有用。下面列出了代码，但我不知道为什么它不起作用 <!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>

我正在学习如何使用jQuery对话框。我发现有一个链接很有用。下面列出了代码，但我不知道为什么它不起作用

<!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中，您只需要JQuery。在开头插入以下内容：

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

添加jqueryui样式表

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

添加jQuery+jqueryui

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

这是工作小提琴：

从下载JqueryUI

编辑：添加到代码

对话框的动态对话框内容不是标准库的一部分，而是JQuery UI的一部分！你也必须包括这一点。别忘了拿一个主题，否则它会变得很难看。。。这意味着您需要单独加载。您还需要样式表，否则它看起来会很糟糕：没错：我只是想给出想法，但实际上我可以看到其他人也这么做了：