jquery UI Dialog总是出现在左上角答案

【问题标题】：jquery UI Dialog always appears on top left cornerjquery UI Dialog总是出现在左上角
【发布时间】：2018-01-16 17:02:51
【问题描述】：

这个问题已经在这个论坛上被问过好几次了，我已经尝试了那里的每一个建议，但到目前为止没有任何效果。

在 MVC 应用程序中，我有一个 jquery ui 对话框，它应该出现在用户单击的链接附近。所以我有以下看法：

div class="row">
    <div class="col-md-4">
        <h2>Link for popup</h2>
        <p>
            @Ajax.ActionLink("Update Status", "UpdateStatus", "Home",
                        new AjaxOptions
                            {
                                HttpMethod = "GET",
                                UpdateTargetId = "rolesPopUp",
                                InsertionMode = InsertionMode.Replace,
                                OnSuccess = "openSuccess"
                            })
        </p>
    </div>
    <div class="col-md-4">
        <h2>See this being updated</h2>
        <p id="rolesPopUp">Col 2</p>        
    </div>
    <div class="col-md-4 popupBase">
        <h2>Web Hosting</h2>
        <p id="successUpdate">Col 3</p>
    </div>
</div>

创建它的唯一目的是测试对话框。基本上我在 Visual Studio 2013 中创建了一个 MVC 应用程序，更新到最新的 jquery 并安装了 jquery ui。我放了一个日期选择器，看看它是否有效。我在页面底部有以下脚本：

 <script src="/Scripts/jquery-3.0.0.js"></script>
 <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
 <script src="/Scripts/jquery-ui-1.11.4.js"></script>
 <script src="/Scripts/bootstrap.js"></script>
 <script src="/Scripts/respond.js"></script>



 <script type="text/javascript">
    $.ajaxSetup({ cache: false });

    $(function () {
        // Activate datepicker ui. It is not shown in the view file to keep the code short.
        $(".myDatePicker").datepicker();    
        $("#successUpdate").text("Waiting!"); 
        $("#rolesPopUp").dialog({
            autoOpen: false,
            position: { my: "center", at: "center", of: ".popupBase", collision: "none" }
        });
    });

    // openPopup function
    function openSuccess() {
        $("#successUpdate").text("Success!");
        $("#rolesPopUp").dialog("open");            
    }

 </script>

无论我做什么，对话框总是出现在屏幕的左上角。我尝试了许多不同的位置（屏幕/窗口/元素的中心，右侧，左侧等），阅读了几篇有关此问题的文章，添加和删除了碰撞，尝试使用 firebug 调试代码以查看位置变化的位置，但由于我对 jquery 的了解相当有限，我无法理解位置被覆盖的位置。事实上，我在代码中没有看到任何暗示代码位置发生变化的内容。我已经花了 5 天的时间来解决这个问题。我需要一些帮助。

【问题讨论】：

在这里测试：jsfiddle.net/Twisty/ddu8fygq 无法复制问题。您的 CSS 状态如何？它们都正确加载吗？有没有可能改变样式？你用的是什么主题？
我已经在尝试一一删除所有主题，您的评论强化了我走在正确轨道上的想法。但是，我唯一没有接触的是 jquery 版本。我使用的是 3.1.0。将其更改为 1.10.2 可以改善这种情况。我已经剥离了所有主题和脚本，我只是使用这个：//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css, //code.jquery.com/jquery-1.10.2.js, //code.jquery.com/ui/1.11.4/jquery-ui.js 这改善了这种情况，但对话框始终相对于目标 div 居中。我无法将其放置在特定位置。
好的。更正一点，演示使用 jQuery 1.12.4 & UI 1.12.0：<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 和 <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

标签： jquery jquery-ui

【解决方案1】：

这很简单。我使用的是 jquery 3.1.0。降级到 jquery 1.10.2 有效。我还没有尝试过任何其他版本的 jquery。我用的是jquery 1.10.2，因为jquery ui dialog官网http://api.jqueryui.com/dialog/用的是这个。

【讨论】：

【解决方案2】：

我使用的是 jQuery UI 1.8.7，它具有以下对话框样式：

.css({ top: 0, left: 0 })

我从以下位置更新它：

.css({ top: 0, left: 0 })
.position($.extend({of: window }, position));

到：

//.css({ top: '170px', left: '650px' })
.position($.extend({ my: "center", at: "center", of: window }, position));

【讨论】：