2

到目前为止，我所看到的是水平和垂直居中的弹出窗口具有设定的宽度，即：

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

4

3 回答 3

0

知道宽度和高度，只需添加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/

于 2012-09-17T16:55:14.600 回答
0

如果您不介意将 .web-dialogue 框包装在容器元素中，您可以通过以下方式使其工作：http: //dabblet.com/gist/3738494，使用 'display: inline-block', 'vertical -alignment”和“文本对齐：居中”。

阅读更多关于我如何使元素居中的信息：http ://www.css-tricks.com/centering-in-the-unknown/

于 2012-09-17T17:03:49.447 回答
0

试试这个演示

源代码 http://jsbin.com/ejijoj/2/edit

于 2012-09-17T17:06:27.410 回答