更改 UI 对话框 jQuery 的位置

Question

我有一个jQuery发布请求，请求更改下拉列表事件，该事件在下拉列表下方呈现一个表单，这一切都是在jQuery UI对话框中完成的
渲染的表单只是有点长，用户必须向下滚动才能保存它。我不希望用户向下滚动，位置应该上升一点，也许是 20px。

    $("#dropdownid").change(function(){
    if($(this).val() == 1)
    {
        $.post("<?php echo Yii::app()->request->baseUrl . '/controller/model/'; ?>",$(this).serialize(),
            function(data) {
                $("#dialog").html(data);
                $("#dialog").dialog("open");
            }
        );
    }
});

表单已经在中心，所以理想情况下这是行不通的 在加载其他用户发布的 jquery 对话框后更改它的位置。

Answer 1

有一些选项，也用于对话框的位置。看一看： http://api.jqueryui.com/dialog/#option-position

这会将对话框设置为中心，将 150px 设置为顶部。试试：

$("#dialog").html(data);
$("#dialog").dialog({ position: [($(window).width() / 2) - (dialogWidth / 2), 150] });
$("#dialog").dialog("open");

Answer 2

我遇到了同样的问题。对我有用的是下一个组合：

	$(function () {
		var _left = (window.innerWidth / 2) - 250;
		$("#dv_TreePopup").dialog({
			autoOpen: false, width: 500, height: 'auto',
			position: [_left, 50],
			create: function (event) {
				$(event.target).parent().css({ 'position': 'absolute', "left": _left, "top": 50 });
			}
		});
      $("#dv_TreePopup").dialog("open");
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<div style="position: relative;">
	<div id="dv_TreePopup" style="display: none;">
        Some content
    </div>
  
</div>