Question

我看到一种奇怪的行为。请将其另存为HTML文件并将其打开。您将只看到“内联”，因为“Lorem ipsum dolor sit amet”"display: none"为media="screen"。完善。然后调用浏览器的“打印预览”功能。您将看到“内联”和“Lorem ipsum dolor sit amet”，因为后者"display: inline"为media="print"。再次完美。这就是我需要的行为。现在点击“内联”链接。将出现一个带有“Lorem ipsum dolor sit amet”的花式盒子。关闭这个fancyBox。并再次调用浏览器的“打印预览”功能。你只会看到“内联”，即现在你不会看到“Lorem ipsum dolor sit amet”。真是太棒了？！有人知道原因吗？！它是fancyBox中的一个错误吗？

<!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>

Answer 1

Dhiraj Bodicherla 的建议对我有用。只需在CSS on Print功能中添加“!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标签类名称。

Answer 2

使用!important应该这样做

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

希望这有帮助

Answer 3

JQuery在不想显示的元素的style属性中设置display：none - 即使工作表已经指定了这个。尝试克隆您想要显示的元素，然后再将它们传递到fancybox。

用fancybox显示后，DIV标签会“永远”隐藏

3 个答案: