元のページの中央に小さなポップアップウィンドウが表示されます。
ポップアップウィンドウが表示されていない場合、元のページは灰色の陰影で覆われています。
元のページの下は引き続き上下にスクロールできます。
5 に答える
次の手順を実行します:
1)次のCSSルールを作成します。
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2)次のコードをjQueryに追加します。
$("body").prepend("<div class='overlay'></div>");
3)完了したら、次のように削除します。
$(".overlay").remove();
これをテストしませんでしたが、動作するはずです(おそらく非常に小さな変更を加えただけです)。これは、自分で行うことを好む場合の1つの方法です。ただし、TwitterのBootstrap libなどの既存のソリューションを使用することはできます。これはクールであり、私はそれをお勧めします。
http://twitter.github.com/bootstrap/
よろしく。
JQueryUIダイアログウィジェットhttp://jqueryui.com/dialog/#modalを使用できます
これは、いくつかの単純なCSSで簡単に実現できます...
オーバーレイ(灰色の背景)は所定の位置に固定され、以下のすべてをカバーします。
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
「ダイアログ」自体のスタイルは似ていますが、小さいです。
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
および属性は単純なJavaScripttop
でleft
計算できるため、ダイアログをブラウザーの中央に配置できます。
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
また、ウィンドウのサイズ変更時に:
$(window).resize(function() {
positionDialog();
}
CSSがこれらDIV
をに設定する方法に注目してくださいdisplay: none
。それらは呼び出されるまで非表示になります。これは、に設定することで実行されますdisplay: block
。
最近では、jQueryUIの優れたダイアログウィジェットに依存する方がはるかに簡単で堅牢であることがわかりました。
それはライトボックスと呼ばれます。CSSのみを使用してそれを行うことができる方法があります:
背景を暗くするための鍵は、opacity
背景を覆うボックスのCSSプロパティです。これにより、黒い背景を設定し、このCSSを透明度に使用できます。
-moz-opacity: 0.8;
opacity:.80;
Twitter Bootstrapに含まれているモーダルを見ることができます:http ://twitter.github.com/bootstrap/javascript.html#modals