jQuery对话框始终居中

问题描述：

我该如何实现，自动调整宽度为&的jQuery模式对话框始终居中在浏览器中。在调整浏览器窗口的大小之后。jQuery对话框始终居中

以下代码不起作用。我认为问题是自动宽度为&高度。

的jQuery - 代码

$("<div class='popupDialog'>Loading...</div>").dialog({ 
    autoOpen: true, 
    closeOnEscape: true, 
    height: 'auto', 
    modal: true, 
    title: 'About Ricky', 
    width: 'auto' 
}).bind('dialogclose', function() { 
    jdialog.dialog('destroy'); 
}).load(url, function() { 
    $(this).dialog("option", "position", ['center', 'center']); 
}); 

$(window).resize(function() { 
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); 
});

谢谢！

绑定'resize'事件的'window'并更新你的'顶/左'相应地定位 – Chad

他怎么能把你的评论标记为正确的答案，我想知道？ :-) – Hubro

我更新了我的问题。 – shub

答

周围的对话框模式窗口，应该让你与放置的CSS为中心的对话框：

margin-left:auto;margin-right:auto;

这难道不是工作？你有一个我们可以看到的'样本'页面吗？

这不会将盒子沿Y轴放置 – Hubro

答

$(window).resize(function() { 
    $("#dialog").dialog("option", "position", "center"); 
});

工作的jsfiddle：http://jsfiddle.net/vNB8M/

对话框居中，自动宽度&高度并继续窗口调整大小后的中心。

不幸的是，这不起作用，请查看我的代码。 – shub

什么不是“工作”？你能更详细地描述问题吗？ –

如果我重新调整浏览器的窗口大小，对话框将不会居中。使用'width＆height = auto'时，对话框位于右下角。 – shub

答

实际上，我认为position: ["center", "center"]不是最好的解决方案，因为它根据创建时视口的大小为对话框分配了一个css属性对话框。

当我尝试在屏幕上垂直显示一个对话框时，我遇到了同样的问题。这里是我的解决方案：

在options部分我的.dialog()函数中，我通过了position:[null, 32]。 null将left:值设置为元素的样式，而32仅用于将对话框固定在窗口的顶部。另外一定要设置一个明确的宽度。

我也用dialogClass选项来指定自定义类，它是一个简单的margin:0 auto; CSS属性：

.myClass{ 
    margin:0 auto; 
}

和我对话的样子：

$('div#popup').dialog({ 
    autoOpen: false, 
    height: 710, 
    modal: true, 
    position: [null, 32], 
    dialogClass: "myClass", 
    resizable: false, 
    show: 'fade', 
    width: 1080 
    });

希望这可以帮助别人。

答

没有任何答案完全符合我的要求。对于那些仍然有问题的人来说，这是对我有用的东西。这将强制对话框始终出现在屏幕的中心，并且会在浏览器调整大小时将对话框居中。

$("#ShowDialogButton").click(function(){ 
    $("#MyDialog").dialog({ 
     show: 'fade' 
    }).dialog("option", "position", { my: "center", at: "center", of: window }); 

    $(window).resize(function() { 
     $("#MyDialog").dialog("option", "position", { my: "center", at: "center", of: window }); 
    }); 

});

再说一遍，如果它对你有用是因为你没有加载动态内容。您的具体条件与原始要求的不同。 – Pere

答

该解决方案的工作：

$(window).resize(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});

表现也相当不错，但你可以等待调整大小结束：jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?。

我也试过，但我不能比打开的对话框中元素的位置滚动更低或更高：

$(window).scroll(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});

jQuery对话框始终居中

相关推荐