的fancybox藉由將邊緣向右

我試驗場推動背景：rockitmembers.us的fancybox藉由將邊緣向右

網站是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>

單擊第一篇文章（我的思考）上的購買許可證按鈕。 Fancybox的功能很好，除了它增加了一個17px的margin-right到fancybox-lock，它弄亂了背景的外觀，我認爲它是在推動滾動條？我不確定。當您在Chrome中檢查它時，它會在點擊購買許可證按鈕時添加<body class="fancybox-lock" style="margin-right: 17px;">。

我試着在這篇文章Jquery Fancybox 2 adds a margin-right?中編輯jquery.fancybox.css並取出overflow-y: scroll;，但仍然沒有解決問題。

任何想法？

來源

2013-01-20 Nate M.

，你能否告訴有關HTML和腳本，請在後，因爲一旦你鏈接的網站關閉，改變或消失這個問題對將來可能遇到類似問題的任何用戶沒有用處。 – Nope

還有整個「爲什麼我會去訪問一些隨機站點？」問題。我不應該去「查看源代碼」來幫助你... –

@FrançoisWahl對不起，我添加了代碼，如果有其他代碼需要讓我知道。 –

它看起來真的和Fancybox無關。看看你的實現，它看起來像你在每個<ul>的「細節」部分的硬編碼寬度推動Fancybox的邊緣。您應該能夠消除cartstyles.css中的大部分浮點數，然後您不需要指定這些元素的寬度。

編輯：我不建議這樣做，作爲一種習慣，但如果唯一的抱怨是額外的保證金，嘗試添加此規則，以你的樣式表：

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

!important優先於正常的級聯，並允許您覆蓋Fancybox應用的內聯樣式。不過，這只是掩蓋了真正的問題。

來源

2013-01-20 04:14:00

當您單擊左側的「查看購物車」按鈕時也會發生這種情況。我只是用fancybox.html頁面（購買許可證按鈕鏈接頁面）替換了所有內容，並且仍然移動背景，我將保留所做的更改以供檢查。 –

@NathanMurphree你能用簡單的網站模板重現這一點嗎？我懷疑某處有衝突。 –

這是我擁有的唯一模板。我相信這是這個主題的東西，我相信它可能是身體背景圖片：'body {background：＃000000 url（「images/back_1.png」）repeat-y top center; font：14px「Helvetica Neue」，Helvetica，Arial，Sans-Serif;顏色：＃333;保證金：0像素; padding：0px;}' –

這是我對同一問題的解決方案。在研究了幾個答案之後，我的發現結合了一些技巧。在jquery.fancybox.css中，對overlay幫助程序部分進行以下更改。

前

.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-15 15:31:43

的fancybox藉由將邊緣向右

回答

相關問題