0

ここに画像の説明を入力してください

  1. 元のページの中央に小さなポップアップウィンドウが表示されます。

  2. ポップアップウィンドウが表示されていない場合、元のページは灰色の陰影で覆われています。

  3. 元のページの下は引き続き上下にスクロールできます。

4

5 に答える 5

3

次の手順を実行します：

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/

よろしく。

于 2013-01-08T22:25:54.123 に答える
2

JQueryUIダイアログウィジェットhttp://jqueryui.com/dialog/#modalを使用できます

于 2013-01-08T22:21:57.473 に答える
2

これは、いくつかの単純な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の優れたダイアログウィジェットに依存する方がはるかに簡単で堅牢であることがわかりました。

于 2013-01-08T22:32:29.413 に答える
1

それはライトボックスと呼ばれます。CSSのみを使用してそれを行うことができる方法があります：

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

背景を暗くするための鍵は、opacity背景を覆うボックスのCSSプロパティです。これにより、黒い背景を設定し、このCSSを透明度に使用できます。

-moz-opacity: 0.8;
opacity:.80;
于 2013-01-08T22:21:32.713 に答える
0

Twitter Bootstrapに含まれているモーダルを見ることができます：http ：//twitter.github.com/bootstrap/javascript.html#modals

于 2013-01-08T22:24:01.163 に答える