javascript - jQuery 对话框跳转到页面底部

Question

我正在使用 jQuery 来为最终用户(可以使用 Chrome 或任何其他浏览器)创建类似于教程/提示的自定义弹出窗口。然而，正如您在下图中看到的，包含我的代码的 div 有一个大的顶部，将我的代码向下推。在使用 Chrome 的开发人员工具时，我注意到需要 -591px 才能在我想要的位置显示弹出窗口，因此我使用了以下代码:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" />
  <script>
    function myFunction() {

        $(function () {
            $("#something").dialog();
        });

        $("#something").dialog({
            top:-591
        });
    }
    </script>

    <div id="something"  style="resize:both; display:none; background-color:yellow; height: 200px; width:200px;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed.</p>
</div>

我尝试了来自 this link 的几个答案但他们没有工作。另外，我注意到当我注释掉第一个脚本行 (jquery-2.1.11.min.js) 时它停止工作，所以它可能与那个 jQuery 版本有关？

这是 Chrome 开发工具的屏幕截图:

Answer 1

问题是你又添加了js而不是添加CSS

将其更改为jquery-ui.css

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

DEMO