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标签在花哨框显示后变为隐藏“永远”

回答

相关问题