Question

我有一个关于下拉事件更改的jQuery帖子请求，它会在下拉列表下方呈现一个表单，这一切都在jQuery UI Dialog中完成渲染的表单只是有点长，用户必须向下滚动才能保存它。我不希望用户向下滚动，位置应该上升一点，也许是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");
            }
        );
    }
});

表单已经位于中心位置，因此理想情况下，此单独的用户Change the position of a jquery dialog box after it loads无效。

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>

更改UI Dialog jQuery的位置

2 个答案: