Question

这个问题已在本次论坛上多次提出，我已经尝试过各种建议但到目前为止没有任何工作。

在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天时间来解决这个问题。我需要一些帮助。

Answer 1

这很简单。我使用的是jquery 3.1.0。降级到jquery 1.10.2工作。我没有尝试任何其他版本的jquery。我使用了jquery 1.10.2，因为这是jquery ui对话框http://api.jqueryui.com/dialog/的官方网站上使用的内容。

Answer 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));

jquery UI对话框始终显示在左上角

2 个答案: