jquery - 第一次单击后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");

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

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

在进一步点击它说那里

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