1

私のテストサイト: rockitmembers.us

サイトはWordpress.orgで、プラグインは使用していません。

header.php 内のコードは次のとおりです。

<link rel="stylesheet" href="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

footer.php のこのコード:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.pack.js"></script>
    <script>
    $(document).ready(function() {
    $(".iframe").fancybox({
       fitToView : false,
       autoSize : false,
       scrolling : 'no',
    maxWidth        : 820,
    maxHeight       : 600,
    width           : 800,
    height          : 600,
    type            : 'iframe'
        });
    });
    </script>

そして、[ライセンスを購入] ボタンの私の wordpress 投稿のこのコード:

<a href="http://www.rockitmembers.us/fancyboxtest.html" class="iframe rollover"><span class="displace">Buy A Beat</span></a>

最初の投稿 (My Reflection) の BUY A LICENSE ボタンをクリックします。Fancybox は正常に機能しますが、fancybox-lock に 17 ピクセルの margin-right を追加すると、背景の外観が台無しになります。スクロール バーが押し出されていると思いますか? わからない。Chrome で調べると<body class="fancybox-lock" style="margin-right: 17px;">、ライセンスの購入ボタンをクリックすると追加されます。

この投稿の提案を試してみましたJquery Fancybox 2 adds a margin-right? jquery.fancybox.css を編集して取り出しましoverflow-y: scroll;たが、それでも問題は解決しませんでした。

何か案は？

4

2 に答える 2

1

これは、同じ問題に対する私の解決策でした。いくつかの答えを調査した後、私の調査結果を組み合わせることでうまくいきました。jquery.fancybox.css 内で、オーバーレイ ヘルパー セクションに次の変更を加えます。

前

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {
 overflow: auto;
 overflow-y: scroll;
}

後 

.fancybox-lock {

}

.fancybox-lock body {

}

.fancybox-lock-test {

}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;

 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {

}
于 2014-12-15T15:31:43.040 に答える
1

Fancybox とはまったく関係がないようです。実装を見ると、それぞれの「詳細」セクションにハードコーディングされた幅<ul>が Fancybox の端を押し上げているようです。のフロートのほとんどを排除できるはずでありcartstyles.css、それらの要素に幅を指定する必要はありません。

編集:これを習慣として行うことはお勧めしませんが、唯一の不満が余分なマージンである場合は、このルールをスタイルシートに追加してみてください:

.fancybox-lock{
    margin-right:0 !important;
}

!important通常のカスケードをオーバーライドし、Fancybox によって適用されるインライン スタイルをオーバーライドできるようにします。ただし、実際の問題が何であれ、それはただ隠蔽するだけです。

于 2013-01-20T04:14:00.817 に答える