そのようなポップアップの外観、サイズ、デザインは完全に多様です-オーバーレイ、シャドウ、アニメーションなど-数えることは何もありません。 それらを結合する唯一のことは、おそらく、それらが通常ページの中央に水平および垂直に表示されるという事実です。 そして、このセンタリングはJSによって行われます。 これらの計算の詳細については説明しません。簡単に説明します。
通常、ポップアップHTMLコードには次の構造があります。
<div class ="popup__overlay"></div> <! -- --> <br/><div class ="popup">...</div> <! -- --> <br/>
CSS（ ここと以下では、一部のブラウザとそのバージョンにのみ必要な一部のプロパティのスペルを意図的に省略し、最も基本的なもののみを残します ）：
.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> background : #000 ;<br/> opacity : . 5 ;<br/> filter : alpha( opacity=50 );<br/> z-index : 999 <br/> }<br/> .popup {<br/> position : absolute ;<br/> width : 20% ;<br/> z-index : 1000 ;<br/> border : 1px solid #ccc ;<br/> background : #fff<br/> } <br/>
JSはブラウザーとブラウザーのバージョンを決定し、これに基づいてワークスペースのサイズとポップアップ自体のサイズを計算します（設定されていない場合）。その後、いくつかの簡単な計算が左上隅の位置で行われます（.popupのleftとtopのcss-properties）。 また、多くのプラグインはページのサイズ変更に応答し、毎回全体を再カウントして、ポップアップがワークスペースの中央に正確に配置されるようにします。
私は元来完璧主義者であり（時にはそれが悪いことも知っています）、多くの場合、細部にまで気を配り、これらの細部に最大限の拡張性を加えて改善しようとしています。これらすべてのプラグインの作業でこの瞬間を逃すことはできませんでした。 ポップアップを配置するすべての作業をJSの肩からブラウザー自体の肩に転送できる、つまりCSSを使用してこの作業を行うことができるという考えがありました。
これが私たちがやることです。
以下に、主要ブラウザのすべての主要バージョンで動作するポップアップの例を示します。 IE <9で正しく動作するには、追加のマークアップとハックが必要です。したがって、このようなメソッドの記述の詳細な説明は省略しますが、興味のある方はフルバージョンを投稿します。
そのため、ボタンがあるページがあり、クリックすると、いくつかの情報を含むモーダルウィンドウがポップアップ表示され、他のすべてのコンテンツがオーバーレイによって隠されます。
手始めに、HTML。 その構造は、上記のコードとは若干異なります。理由-記事の後半で詳しく説明します。 要素クラスは同じままです。
< div class ="popup__overlay"> <br/> < div class ="popup"></ div > <br/> </ div > <br/>
そしていくつかのCSS：
.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> width : 100% ;<br/> height : 100% ;<br/> z-index : 999 <br/> }<br/> .popup {<br/> } <br/>
固定サイズ
最も簡単なオプション。 新しいものを発明する必要はありません。
.popup {<br/> left : 50% ;<br/> top : 50% ;<br/> width : 400px ;<br/> height : 200px ;<br/> margin-left : -200px ;<br/> margin-top : -100px <br/> } <br/>
幅と高さの半分の負のマージンは平凡で退屈なものですが、これについては元々何もありません。 続けましょう。
ポップアップサイズはコンテンツによって異なります
まず-水平方向の配置-それは簡単だと思われます。 ポップアップの幅が固定されている場合、次のもので十分です。
.popup {<br/> margin : auto <br/> } <br/>
これは、垂直方向の配置にはまったく影響を与えません。ところで、水平方向の配置で十分な場合は、ポップアップの他の上部インデントを示すことでそこで停止できます。 しかし、これは私たちには十分ではありません！ 続けましょう。
垂直方向の配置。 ここではすでに興味深いものになっています。 もちろん、テーブルまたはdisplay：table＆display：table-cellを備えたテーブルのエミュレーションは、確かにそのようなタスクに対処しますが、これを古いIEで機能させるのはより高価です。 テーブルも消えます-明白な理由のため。
そのため、マージンはすでに減少しています-サイズはわかりません。 同様の効果を持つプロパティのことを思い出します。 ええ、テキストを揃えます。 ただし、インライン要素のみ。 わかった 神自身がディスプレイの使用を命じたようです：inline-block-インライン要素のプロパティを適用できるブロック要素。 このプロパティのサポートにより、すべてのブラウザも正常であると言えます。 コードは次のようになります。
.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> width : 100% ;<br/> height : 100% ;<br/> z-index : 999 ;<br/> text-align : center <br/> }<br/> .popup {<br/> display : inline - block ;<br/> vertical-align : middle <br/> } <br/>
垂直方向の配置はそのままです-垂直方向の配置は私たちに適しています。 その他の状況では、行の高さを使用することも適切ですが、ページの高さ（このコンテキストでは行の高さ）が固定されていないため、ここでは使用できません。 未知のサイズの要素を垂直に並べることで、1つのトリックが助けになります。 Habréでこの方法を見つけたことを正確に覚えていますが、残念ながら、そのトピックへのリンクを見つけることができませんでした。 このメソッドの構成は次のとおりです。幅がゼロで、親の高さが100％のインラインブロック要素が追加され、行の高さが親の高さの100％、つまりページの作業領域の高さに「ポップアップ」されます。 それをもっとエレガントにしましょう-不要なマークアップの代わりに、擬似要素を使用します：
.popup__overlay :after {<br/> display : inline - block ;<br/> width : 0 ;<br/> height : 100% ;<br/> vertical-align : middle ;<br/> content : '' <br/> } <br/>
オーバーレイの半透明な暗色を追加することは残っています-rgbaはこれに対処します。 それだけです！ これで、ポップアップの位置は、CSSレベルでブラウザによってのみ調整されます。
最後の例
気づいた方法の欠点のうち、特にフロートを使用する場合、IE 6-7での表示で不具合が生じることがあります。
繰り返しますが、私の方法はJSの使用をまったく排除しません。負荷の一部をJSからCSSに転送することにより、ポップアップの速度を部分的に最適化します。
この方法は視覚的にも内部的にも改善できると確信しており、このテーマに関するアイデアや提案、操作に関するコメント、さまざまなブラウザでの表示に喜んで対応します。
UPD：リクエストに応じて、IE7 +で動作するサンプルを追加-http: //jsfiddle.net/vend3tta/SE4tS/