DIV標籤在花哨框顯示後變爲隱藏「永遠」

我看到一個奇怪的行爲。請保存爲HTML文件並將其打開。因爲「Lorem ipsum dolor sit amet」，您只會看到「Inline」，對於media="screen"，有"display: none"。完善。然後調用瀏覽器的「打印預覽」功能。你會看到「Inline」和「Lorem ipsum dolor sit amet」，因爲後者的"display: inline"爲media="print"。再次完美。這是我需要的行爲。現在點擊「Inline」鏈接。將出現一個帶有「Lorem ipsum dolor sit amet」的花式框。關閉這個fancyBox。再次調用瀏覽器的「打印預覽」功能。你只會看到「內聯」，即現在你不會看到「Lorem ipsum dolor sit amet」。真是太棒了！有人知道原因嗎？！這是fancyBox中的錯誤嗎？ DIV標籤在花哨框顯示後變爲隱藏「永遠」

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script type="text/javascript" src="fancyBox/lib/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="fancyBox/source/jquery.fancybox.js?v=2.0.6"></script> 
    <link rel="stylesheet" type="text/css" href="fancyBox/source/jquery.fancybox.css?v=2.0.6" media="screen" /> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fancybox').fancybox(); 
    }); 
    </script> 
    <style type="text/css" media="screen"> 
    .hiddenContent { 
     display: none 
    } 
    </style> 
    <style type="text/css" media="print"> 
    .hiddenContent { 
     display: inline 
    } 
    </style> 
</head> 
<body> 
    <a class="fancybox" href="#inline1">Inline</a> 
    <div id="inline1" class="hiddenContent"> 
    <p>Lorem ipsum dolor sit amet</p> 
    </div> 
</body> 
</html>

來源

2012-06-24 Alexey Yumashin

JQuery的規定顯示：無中顯示它不想要的元素的樣式屬性 - 即使已經張指定此。嘗試克隆你想要顯示的元素，然後將它們傳遞給fancybox。

來源

2012-06-24 06:41:10

謝謝。我應該如何執行這種克隆？ –

我使用下面的代碼： '$ .fancybox（{＃myElement「）。clone（） }）;' - 但在我的情況下，我無法硬編碼標籤名稱（」＃ myElement「），因爲我在我的網站上使用了一個相同的fancyBox用於數十個鏈接。或者我應該開始使用幾十個fancyBoxes？希望不是:)那麼，如何克隆目標元素而不用爲其名稱進行硬編碼？ –

使用!important應該這樣做

<style type="text/css" media="print"> 
    .hiddenContent { 
     display: inline !important; 
    } 
</style>

希望這有助於

來源

2012-06-24 06:47:39 Dhiraj

謝謝你，這在第一篇文章中列出的HTML代碼片段中起作用，但由於某種原因，在我的網站的真實（「大」）代碼中不起作用。目前我試圖找出這兩個代碼之間的任何區別...... –

那麼，在真正的（「大」）代碼中，這個「！important」keywotd也可以工作，但是......在fancyBox關閉後，「#inline1 「DIV被移動到文檔的末尾！起初我沒有注意到它 - 我認爲這個DIV只是隱形。但是當我將「打印預覽」瀏覽器的視圖滾動到最後時，我在那裏看到了我的DIV標籤。那當然是fancyBox的一個bug。似乎它只發生在一個大而複雜的HTML中，並且在一個小的HTML中（就像我的第一篇文章中的那樣），一切正常。 –

如果您有解決方案，請在您的問題後添加[解決] :) – Dhiraj

DHIRAJ Bodicherla的建議爲我工作。只需在打印功能的CSS中添加「!important」即可。（不過我使用的塊，而不是在線）

$("#print").on("click", function(){ 
    var theWork = window.open('','PrintWindow'); 
    var html = "<html><head>"; 
    html += "<style>.printable{display:block !important;} .notprintable{display:none;} </style>";    
    html += "</head>"; 
    html += "<body><div id='myprint'>" + $('.fancybox-inner').clone().html();  
    html += "</div>";   
    html += "</body></html>";  
    theWork.document.open(); 
    theWork.document.write(html); 
    theWork.document.close(); 
    theWork.print(); 
    theWork.close(); 
});

「#PRINT」是你的按鈕的ID。
「.printable」是您要打印的div標籤類名稱。
「.notprintable」是您不希望打印的div標籤類名稱。

來源

2012-11-01 06:17:35

DIV標籤在花哨框顯示後變爲隱藏「永遠」

回答

相關問題