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); 
}

これを行うと、はい、ポップアップが大きくなりますが、右側にあるため、中心がずれているように見えます。これを解決する助けがあれば、本当に感謝しています。この単純な jquery ポップアップを置き換えるために、すべての ajax ツールキット ポップアップを削除しました。

4

3 に答える 3

0

.web-dialogueボックスをコンテナ要素でラップしてもかまわない場合は、次のように機能させることができます：http ://dabblet.com/gist/3738494、'display ：inline-block'、'verticalを使用-alignment'および'text-align：center'。

要素をどのように中央に配置したかについて詳しくは、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 に答える
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 に答える