指定されたクラス名（jQuery）を持つ各要素（div、image、span、...）に重複するdivを動的に追加します。

Question

選択したdivの視覚効果を使ってjQueryプラグインを作成します。 プラグインを統合するので、次のようになります。

$('.myclass').mypluginfunction(); 

視覚それは次のようになります。全体の要素の上に透明のdiv、背景を動かすと。

浮動小数点のdivなどを破壊せずにdivを動的に追加することはできますか？私はその解決策があることを知っています：より大きなZインデックスを持つ絶対配置されたdivを追加します。

Answer 1

あなたはz-indexを使って調整する必要はありません。ソースの下位の要素は、その前にコンテンツをオーバーレイします。要素をposition: relativeに設定し、幅と高さが100％に設定された絶対配置のdivを追加します。これにより効果的にオーバーレイされます。

自身にクロム（またはFirebugの）を取得し、コンソールに $.append()と遊ぶ：

$('*').css('position', 'relative').append('<div style="position:absolute; width:100%; height:100%; background: #F00; opacity:0.5;"></div>'); 

これは、比較的、その後、赤い背景の絶対位置のdivを追加し、サイト上のすべての要素を配置します。サイトのすべての要素がオーバーレイされていることがわかります。

もちろん、これは少し爆発するだろうが、このテクニックの使い方が簡単です。