0

次のような単純なライトボックスを作成しました。

 $(document).ready(function() {
       $(".abc").click(function(event) {
           event.preventDefault();
           var href = $(this).attr("href");
           $(".bucket").load(href);
           $(".overlay").css({"display": "block"});
           $("body").css({"overflow": "hidden"});

       });
       $(".overlay, .close").on('click', function(e) {
           if( e.target !== this ) 
                return;
           $("body").css({"overflow": "visible"});
           $(this).hide(); 
       });
   });

ご覧のとおり、overflow:hidden を適用してボディのスクロールバーを無効にしています。

ライトボックスを閉じた後、オーバーフロー プロパティを通常の状態にリセットしています。

どういうわけか、すべてが台無しになります。すべてのフォントサイズがランダムに変化するようです。

何が問題なのですか？

ここにデモがあります：

「ABC」というリンクをクリックして、効果を確認します。

http://www.deutsch-lernen.com/DLOneu/learn-german-online/beginners/uebung9_1.php#top

4

2 に答える 2

0

ライトボックスが開くと、alleSeiten.css が含まれていると思います。アンカーやその他のスタイルがグローバルに変更されています。トップメニューやその他の場所のフォントを変更するようにしています。

アンカータグのデフォルトのスタイルは次のとおりです:-

a:active{ 色: 継承; 表示ブロック; フォントサイズ: 14px; パディングトップ: 10px; テキスト装飾: なし; テキスト変換: 大文字; 幅: 100%; }

alleSeiten.css の場合:-

{ 色: #666666; font-family: Verdana、Arial、Helvetica、sans-serif; フォントサイズ: 8pt; フォント スタイル: 通常; フォントの太さ: 太字; 行の高さ: 通常; }

ページのスタイルに影響を与えないように、alleSeiten.css を変更する必要があります。最終的には、style.css スタイルをオーバーライドしています。

于 2013-06-05T10:32:09.240 に答える