jquery - ライトボックスの背景効果

Question

jQuery の学習を始めたばかりで、ライトボックスに似た背景効果を有効にする方法がわかりません。

<div>(登録ウィザード) を 100% の不透明度で表示し、その背後にある他のすべてを約 50% の不透明度でクリックできないようにしたいと考えています。

jQueryを使用してこれを達成するにはどうすればよいですか?

Answer 1

こうやって：

$('<div id="overlay" />').css({
   position:'fixed'
 , width: '100%'
 , height : '100%'
 , opacity : 0.6
 , background: '#000'
 , zIndex:9999
 , top: 0
 , left: 0
}).appendTo(document.body);

デモ

上記のコードを関数に入れ、そのオーバーレイが必要なときにいつでも呼び出すことができます。不要になったときに削除するには、次のようにします。

$('#overlay').remove();

---

参考までに、上記のスタイルをクラスの CSS に配置し、必要なときや削除したいときにjQuery を使用することもできaddClassます。bodyremoveClass