jQueryでモーダルポップアップを書く

Question

私はモーダルウィンドウの仕組みを理解しようとしています。私は知っている、そこに複数のプラグインがありますが、私は自分の - 単純なものを記述したいと思います。

- ページ上のいくつかの要素がクリックされたときに、隠れたレイヤーを表示するjquery関数を追加できます。

- 私はそれをページのコンテンツの上にロードすることはできますが、CSSを調整することはできますが、私はまだいくつかのことをする方法がわかりません。

たとえば、残りのページをウィンドウの下にフェードインするにはどうすればよいですか？

ありがとうございました。

Answer 1

モーダルコンテンツとページの残りの部分との間に別のレイヤーを使用する必要があります。これは、通常、オーバーレイと呼ばれます。オーバーレイは黒または白（通常）の色で、わずかに不透明です。オーバーレイは、本体/ htmlのサイズによって制限されないように、最良の結果を得るために

は

body, html  { width: 100%; height: 100% } 

を設定します。

div.overlay  { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 12000 } 

その後、オーバーレイを追加：あなたが問題に実行し始め

var overlay = $('<div />').css({opacity: '.8' }).addClass('overlay'); 
$('body').append(overlay); 

は、zインデックス制御要素の上にドロップダウンリストを表示し、そのようなIE 6などの古いブラウザです。このためには、コンテンツの下に隠れたiframeテクニックを使用する必要があります。

Answer 2

たとえば、jQuery's dialogのようになります。明示的な幅と高さが設定された（動的にJavascriptで計算される）要素divを使用し、絶対的に左上に配置されます。退色効果を得るには、不透明度のある背景画像が設定されます（IEの場合はfilter: alpha(opacity = 50);も適用されます）。

マークアップ：

<div class="ui-widget-overlay" style="width: 1263px; height: 1274px; z-index: 1003;"></div> 

はCSS：

.ui-widget-overlay 
{ 
    background-image: url('path/to/dark-image.png'); 
    opacity: 0.5; 
    left: 0; 
    position: absolute; 
    top: 0; 
}