Question

我尝试用jquery打开一个弹出窗口，但弹出窗口没有打开我无法理解我错在哪里？请帮帮我。

脚本

<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function () {
            $("#dialog").dialog({modal: true, height: 590, width: 1005 });
        });
    });

CSS

#dialog{display:none; width:800px; border:1px solid #000; border-radius:4px;}
    p{clear:both; background:blue; color:#fff; font-size:16px; padding:8px;}

HTML

<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
    <p>test</p>
</div>

...

Answer 1

查看文档https://jqueryui.com/dialog/。网站上还有一个完整的例子。显然你只是忘了添加jquery ui依赖。

Answer 2

正如其他海报所建议的那样，您需要包含对jquery ui脚本的引用。请参阅以下示例：

#dialog {
  display: none;
  width: 800px;
  border: 1px solid #000;
  border-radius: 4px;
}
p {
  clear: both;
  background: blue;
  color: #fff;
  font-size: 16px;
  padding: 8px;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#OpenDialog").click(function() {
        $("#dialog").dialog({
          modal: true,
          height: 590,
          width: 1005
        });
      });
    });
  </script>
  <style>
    #dialog {
      display: none;
      width: 800px;
      border: 1px solid #000;
      border-radius: 4px;
    }
    p {
      clear: both;
      background: blue;
      color: #fff;
      font-size: 16px;
      padding: 8px;
    }
  </style>
</head>

<body>
  <a id="OpenDialog" href="#">Click here to open dialog
        </a>
  <div id="dialog" title="Dialog Title">
    <p>test</p>
  </div>
</body>

</html>

如何用jquery打开弹出窗口

2 个答案: