Question

我正在一个只有一张图片的页面上构建一个上下文菜单，我希望用户只需点击两个选项：打印或关闭页面。一切正常，除非他们打印时，上下文菜单也会打印出来。单击打印后如何删除菜单以便不打印？这是一个小提琴：

   $(document).ready(function(){
      $('#imgContainerDiv').vscontext({menuBlock: 'vs-context-menu'});
   });

我的标记：

<body>
  <div id="imgContainerDiv">
    <img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" alt="city" />
  </div>
  <div class="vs-context-menu">
   <ul>
       <li class="print"><a href="#" onclick="window.print();return false;" id="menu_1">Print</a></li>
       <li class="exit"><a href="#" onclick="window.close();return false;" id="menu_2">Close</a></li>
   </ul>
</div>

</body>

Answer 1

CSS Print Media可用于应用打印样式。

@media print {
    .vs-context-menu {display:none;}
}

或者你可以有一个单独的样式表

<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print">

Answer 2

添加一个打印样式表，隐藏您不想打印的任何元素。

通常，打印样式表会优化页面以便在纸上阅读，例如删除标题图像，将文本设置为白色黑色，以及删除任何非必要元素。

用于打印页面的上下文菜单打印上下文菜单本身

2 个答案: