0

我看到一个奇怪的行为。请将其保存为 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。关闭这个fancyBox。并再次调用浏览器的“打印预览”功能。您只会看到“Inline”，即现在您不会看到“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>
4

3 回答 3

2

Dhiraj Bodicherla的建议对我有用。只需!important在 CSS on Print 功能中添加“”。（但我使用块而不是内联）

$("#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-01T06:17:35.560 回答
1

使用!important应该这样做

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

希望这可以帮助

于 2012-06-24T06:47:39.463 回答
0

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

于 2012-06-24T06:41:10.520 回答