0

奇妙な行動が見られます。これを HTML ファイルとして保存し、開いてください。"Lorem ipsum dolor sit amet" には があるため、"Inline" のみが表示さ"display: none"れmedia="screen"ます。完全。次に、ブラウザの「印刷プレビュー」機能を呼び出します。「インライン」と「Lorem ipsum dolor sit amet」の両方が表示されます。後者に"display: inline"はmedia="print". 再び完璧。それが私が必要とする行動です。次に、「インライン」リンクをクリックします。「Lorem ipsum dolor sit amet」のfancyBoxが登場します。この 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>
4

3 に答える 3

2

Dhiraj Bodicherlaの提案は私にとってはうまくいきました。!important印刷機能の CSS に" " を追加するだけです。（ただし、インラインではなくブロックを使用しました）

$("#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 は、表示したくない要素の style 属性に display:none を設定します (シートで既に指定されている場合でも)。ファンシーボックスに渡す前に、表示したい要素を複製してみてください。

于 2012-06-24T06:41:10.520 に答える