jQuery对话框跳转到页面底部

Question

我正在使用jQuery来创建一个类似于最终用户（可以在Chrome或任何其他浏览器上）的教程/提示的自定义popUp。但是正如您在下图中看到的那样，包含我的代码的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