6

私は仲間の従業員のために社内リソース用の Web アプリを作成しました。ベース テンプレートの一部は単純なダイアログボックスdivです。クリックされ、クリックされたボタンに基づいてコンテンツが表示され、隅の X をクリックすると消えます。あなたはルーチンを知っています。bodyheaderdiv

したがって、これを行う必要はないと思いますが、基本テンプレートのCSSでダイアログボックスのCSSを記述して、画面上の位置が常に多かれ少なかれあることを確認できていないことがわかりました同じ。代わりに、ダイアログ ボックスのコンテンツのサイズがページごとに変化するため、ダイアログ ボックスのmargin-leftとmargin-rightを任意のページで再定義する必要があるようです。

たとえば、ダイアログ ボックスのベース css はそのようなもので、毎回ベース html テンプレートが読み込まれます。

#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000; /*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
}

余白がないことに注意してください。ダイアログ ボックスのサイズとその内容の悪質な不一致を引き起こさずに仕事をする単一の余白値は見つかりませんでした。たとえば、コンテンツが非常に大きいと予想されるページでは、余白を次のように設定しました。

#dialogBox {
margin: 5% 10% 0 10%;
}

ただし、コンテンツがはるかに軽量であると予想される場合は、次のページを読み込むときに余白を再度設定して、視覚的な悪ふざけを回避する必要があるようです。

#dialogBox {
margin: 5% 33% 0 33%;
}

これは大したことではありませんが、繰り返します。margin-leftコンテンツの「ゴルディロックス」サイズを維持しながら、divが自然に拡大して等しく維持され、任意のページでオンになるようにするためのより良い方法があると確信していmargin-rightます-大きすぎず、小さすぎず、いつもちょうどいい。

一部の jQuery ライブラリには、「見栄えの良い」ダイアログ ボックス用の既存のインフラストラクチャがあることに気付きました。それらは画面上をドラッグしてトリックを実行することさえありますが、これは社内の従業員専用の Web アプリのためのものなので、それに興味がないだけです。また、自分で何かを構築する方法を知るのは良いことですよね? 私はこれに慣れていないので、ごまかして大量の CSS を盗むことはできません。そのため、正直に知識を得ようとしています。

問題に関連するコードを省略した場合は、喜んで投稿を編集します。

編集 - dialogBox を包含に配置することに関して、2 つの優れた回答がありdivます。それらをきっぱりと受け入れていない唯一の理由は、いくつかのにもかかわらず、各ページの寸法の側面を再定義する必要があるように見えるからです。ワンアンドダンコード。異なるページの情報は少し違いすぎて、必要に応じてユーザーにページをスクロールさせないようにしたいので、これはおそらく私のせいです。ページごとに dialogBox の幅を設定すると、それが可能になります。CSS に任せてそれができるかどうかはわかりません。

最終編集 - 今のところ、受け入れられた回答が私のプロジェクトにとって最良の解決策であると信じています。

4

4 に答える 4

1

ダイアログ ボックスで幅を設定するオプションはありますか?

そうであれば、left プロパティを 50% に設定し、margin-left プロパティを -(width/2) に設定できます。

ここを参照してください：

http://jsfiddle.net/tY7ef/

#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000;
/*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
left: 50%;
margin-left: -200px;
width: 400px;
}

パーセンテージも使用できます。

width: 60%;
margin-left: -30%;

通常、自動マージンは絶対配置要素では機能しません: http://www.sitepoint.com/css-center-position-absolute-div/

于 2013-07-18T17:13:45.463 に答える
0

自動マージンを使用して試すことができます。この方法では、div が自動的に中央に配置されます。

#dialogBox {
   margin: 5% auto 0;
}
于 2013-07-18T17:09:40.110 に答える
0

要素の幅を知っているかどうかに応じて、これを行う2つの簡単な方法を考えることができます

幅がわかれば

div の幅がわかっている場合は、画面の左側からの距離を設定し、マージンで幅の半分を差し引きます。

あなたの画面がこの幅だとしましょう：

/*
Legend:
Edge of screen: |
Center of element: .
Beginning of div: [
End of div: ]
*/
|                            .                            |
|                            .{center}                    |{size:56 characters}

そして、あなたはこの幅のdivを持っています:

[---I am .a div---]{size:16 characters}

この方法を使用して中央に配置するには、左側から画面の半分までの距離を設定します ( left: 50%;)。

|                            .[---I am .a div---]         |
|                            .                            |

そして、マージンの余分な距離、div の合計サイズの 50%、またはこの場合は 8 文字を差し引きます。( margin-left:-8 characters;):

|                   [---I am .a div---]                   |
|                            .                            |

これで中央の div ができました。

これは、div をその幅のちょうど半分の左に戻す限り、使用する任意の幅タイプ (px、%、em...) で機能します。

#dialogBox{
 width:70%;
 left:50%;
 margin-left:-35%; /*half of 70%*/
}
#dialogBox{
 width:100px;
 left:50%;
 margin-left:-50px; /*half of 100px*/
}
#dialogBox{
 width:202em;
 left:50%;
 margin-left:-101em; /*you get the picture*/
}

フィドル

幅がわからない場合。

ダイアログ ボックスのコンテナとして機能する新しい div を作成します。left:このコンテナ div ( position:absolute;)の値を に設定し、ダイアログ div ( now )の値から50%減算します。50%left:position:relative;

div 内に div があります。

[[---I am .a div---]]{size:still 16 characters}
/*
  It is important to note that the width of the outer div 
  will always be equal to the width of the inner div 
  unless defined otherwise.
*/

コンテナの div ( C) を画面の左から 50% になるように設定すると ( )、次のleft: 50%ようになります。

                              CD                 DC
|                            .[[---I am .a div---]]       |
|                            .                            |

ここで、leftダイアログ ボックスの div ( D) を-50%(親要素の幅の 50% を減算します。この場合、ダイアログ ボックスの幅の正確に 50% です)) に設定し、次を取得します。

                    D         C        D          C 
|                   [---I am .[a div---]          ]       |
|                            .                            |

これにより、ダイアログボックスの幅を知らなくても、ダイアログボックスが効果的に中央に配置されます。

#container{
  position: absolute;
  left:50%;
}
#dialogBox{
  position: relative;
  left:-50%;
}

フィドル

例ではコンテナ div を赤にして、どのように動作しているかを確認できるようにしました。

于 2013-07-18T18:52:41.870 に答える