javascript - サイトの透明な残りの部分で単純な div を作成するには?

Question

サイトの透明な残りの部分を含む単純な div を作成する方法 (この div は、リンクまたは他の div をクリックした後に表示されます)

例:

Answer 1

rgba(0, 0, 0, 0.8);背景として使えませんか？デモンストレーション用のフィドル

div#transparent {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:2;
background:rgba(0, 0, 0, 0.8);
}
div#content {
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

Answer 2

もう 1 つの方法は、jQuery UI を使用することです。jQuery UIでは、プロパティdialogと共にウィジェットを使用して同じ効果を得ることができます。modaljQuery UI には他にも便利なウィジェットがたくさんあります。

jQuery UI : http://jqueryui.com/

jQuery テーマローラーを使用して、さまざまなテーマを jQuery UI に追加したり、カスタム テーマを作成して、必要な透明な背景を取得したりすることもできます。

jQuery テーマローラー: http://jqueryui.com/themeroller/

jsFiddle での作業例: http://jsfiddle.net/jk4ru/

Answer 3

jquery の場合: http://jsfiddle.net/bbgwB/

$.fn.center = function () {
    this.css({
        'top': ($(window).height() - this.height()) / 2,
        'left': ($(window).width() - this.width()) / 2
    });
    return this;
};

$(function () {
    $(window).resize(function () {
        $('.message').center();
    }).resize();
});

使用されたCSS:

html, body {
   height:100%;
}
.overlay {
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.4);
  position:relative;
  z-index:1;
}
.message {
   width:120px;
   height:200px;
   background:yellow;
   position:absolute;
   z-index:2;
   left:0;
   top:0;
}