2

この質問がすでにされていたら申し訳ありませんが、検索しても見つかりませんでした。基本的に、私のページにはドロップダウン メニューがあり、通常はメイン コンテンツの上に表示する必要があります。しかし、そのコンテンツ内には、その上に浮かぶ必要があるライトボックス タイプのものがあります。

したがって、コードは次のようになります。

<div style="z-index:2"> 
   Drop Menu here
</div>
<div style="z-index:1">
   Content Here... 
   <a href="#">Lightbox button here</a>
   <div>
        Lightbox content (hidden initially)
   </div>
   <div>
        Lightbox background (hidden initially)
   </div>
</div>

だから今私が抱えている問題は、そのライトボックスの背景を高い z-index に設定しようとすると、その親が兄弟メニュー部門よりも低い z-index であるため、メニューの背景を上書きしないことです。コンテンツ コンテナをより高いレベルに設定すると、ドロップダウンがコンテンツの上に表示されなくなり、クリックできなくなります。私がここで見逃しているのはおそらく明らかなことだと思いますか、それとも私が使用しているライトボックスプラグインがそれほど良くないか何かでしょうか? また、joomla CMS を使用しているため、ライトボックス部門を作成できる場所に制限があります。

それ以外の場合、私が考えた他のオプションは、メニューの z-index を子部門 (実際のメニュー) に設定することですが、問題はフレームワーク システムであるため、ベース テンプレートからも z-index を削除する必要があります。 「無視」などに設定するz-indexコマンドがない限り、更新で上書きされますか？

わかりました、代わりに z-index を auto に設定しましたが、動作しているようですが、これが最善の解決策であるかどうかはわかりません。他の可能な解決策を歓迎します。

4

2 に答える 2

0

問題はあなたのHTMLだと思います。ライトボックスコンテナは、bodyタグの子としてコンテンツdivの外に配置する必要があります。

例：

<div style="z-index:2"> 
   Drop Menu here
</div>
<div style="z-index:1">
   Content Here... 
   <a href="#">Lightbox button here</a>
</div>

<div style="z-index:101">
    Lightbox content (hidden initially)
</div>
<div style="z-index:100">
    Lightbox background (hidden initially)
</div>

注：もちろん、代わりに上記のすべてにIDを割り当て、外部スタイルシートを使用する必要があります。

于 2012-11-16T03:15:41.327 に答える
0

わかりましたので、完全に機能する唯一の方法は、jquery を使用して本体に分割を追加することでした。したがって、ライトボックススクリプトに追加しました：

jQuery('body').append(modalBG);
jQuery('body').append(modal);

modal と modalBG は、それぞれポップアップ コンテンツと背景を持つ div です。

それをライトボックスを作成する関数に追加すると、ボディの最後の分割の子として追加されます。つまり、他のすべての分割の上に自然に表示されますが、これにも固定の z-index を設定できると思います。これはおそらくプロにとって非常に明白なことだと思いますが、私はそれと戦ったので、制限のあるテンプレートとCMSシステムに苦労している他の誰かが情報を高く評価するでしょう.

于 2012-11-16T13:27:20.123 に答える