[英]Centering JQuery popup horizontally with max-width and min-widths
到目前为止,我所看到的是将弹出窗口水平和垂直居中设置宽度,即:
width:200px;
height:200px;
left:50%;
top: 50%;
position:fixed;
但是我试图将最大和最小宽度添加到弹出窗口中,因为我有一些更宽一些而一些更短一些,但是我想控制宽度不超过某个宽度。
.web_dialog
{
display: none;
position: fixed;
min-width: 360px;
min-height: 180px;
max-width: 880px;
max-height: 480px;
top: 50%;
left: 50%;
background-color: #ffffff;
padding:10px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
z-index:1001;
border:1px solid rgba(0, 0, 0, .333);
}
现在,当我执行此操作时,弹出窗口会增大,但是会向右移动,因此看起来好像没有中心。 任何帮助我解决此问题的方法,我将非常感谢。 我只是删除了所有的ajax工具箱弹出窗口,以替换这个简单的jquery,我希望它能正常工作,因为有很多页面我必须更改..:S
知道宽度和高度后,只需添加margin-left: -width/2
和margin-top: -height/2
。 但是,由于您不知道该值,因此首先需要捕获它,然后应用CSS规则:
$(function(){
$dialog = $(".web_dialog");
var w = $dialog.width();
var h = $dialog.height();
$dialog.css({'margin-left' : -w/2, 'margin-top' : -h/2});
});
演示: http : //jsfiddle.net/kenPN/
如果您不介意将.web-对话框包装在容器元素中,则可以通过以下方式使其工作: http : //dabblet.com/gist/3738494 ,使用'display:inline-block','vertical -alignment”和“ text-align:center”。
阅读有关如何使元素居中的更多信息: http : //www.css-tricks.com/centering-in-the-unknown/
试试这个演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.