【问题标题】：jquery ui dialog change position after first click第一次单击后jquery ui对话框更改位置
【发布时间】：2019-03-26 14:44:20
【问题描述】：

我正在使用 jquery uimodaldialog 这是设置

$("#dialog").dialog({
    autoOpen : false,
    minWidth : 700,
    show : {
        effect : "fade",
        duration : 1000
           },
    hide : {
        effect : "fade",
        duration : 1000
           },
    close : function(event, ui) {
    },
});

我用这个打电话

 $('.mylink').on('click', function() {
 $( "#dialog" ).dialog( "open");

现在第一次点击它会显示在页面中心。

如果我再次点击，它会向上移动大约 200 像素。

进一步点击它会显示那里

【问题讨论】：

$( "#dialog" ) 元素的内容是否在两者之间变化？

标签： jquery jquery-ui modal-dialog

【解决方案1】：

HTML

<input type="button" class="mylink" />
<div id="dialog">Hello</div>

jQuery

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        minWidth: 700,
        show: {
            effect: "fade",
            duration: 1000
        },
        hide: {
            effect: "fade",
            duration: 1000
        },
        position: {
            my: "center",
            at: "center",
            of: window
        },
        close: function (event, ui) {},
    });
    $('.mylink').on('click', function () {
        $("#dialog").dialog("open");
    });
});

工作演示http://jsfiddle.net/cse_tushar/k4LLM/1/

参考http://api.jqueryui.com/dialog/#option-position

【讨论】：

我不知道，但我尝试将相同的编码放入我的文件中。第一次它显示在正确的位置，但下一次显示大约 200px 向上。知道哪件事一直在重复
我可以使用.dialog('open') 添加位置，以便我从那里获得价值而不是从默认值
click here 这可能对你有帮助

【解决方案2】：

您可以通过以下代码固定对话框的位置

$("#dialog").dialog({
autoOpen : false,
minWidth : 700,
position: { 
    my: 'top',
    at: 'top',
    of: $('#some_div')
  }
show : {
    effect : "fade",
    duration : 1000
},
hide : {
    effect : "fade",
    duration : 1000
},
close : function(event, ui) {
},
});

你可以在http://api.jqueryui.com/position/找到关于jquery位置的帮助

【讨论】：

我尝试过，但第一次位置就像定义的那样正确，然后下一次比上一个位置向上
你为 my , at 和 of 设置了什么值？
和你的一样，有什么办法可以用dailog.open添加位置

【解决方案3】：

如果您在其中有内容的动态高度。我认为对话框可以更改第二次点击。要解决它，请使用对话框的高度选项。

$("#dialog").dialog({ 自动打开：假，最小宽度：700， height : 500, //它应该是你的内容的大小节目： { 效果：“褪色”，持续时间：1000 }, 隐藏： { 效果：“褪色”，持续时间：1000 }, 关闭：函数（事件，用户界面）{ }, });

【讨论】：