第一次单击后，jquery ui对话框更改位置

Question

我正在使用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");

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

如果我再次点击则会向上移动约200px。

进一步点击它说

Answer 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

Answer 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位置的帮助

Answer 3

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

$("#dialog").dialog({
    autoOpen : false,
    minWidth : 700,
    height : 500, //it should be size of your contents
    show : {
        effect : "fade",
        duration : 1000
           },
    hide : {
        effect : "fade",
        duration : 1000
           },
    close : function(event, ui) {
    },
});