Question

我有一个模式，当弹出打开时它有一个打印按钮来打印模式的内容。我遵循了答案from here和here的组合，它们是尝试获取引导程序模式以进行打印的绝妙资源，但是，我似乎遇到了与Chrome相关的错误。我无法在Safari，FireFox或Edge中复制它。

正在发生的事情是，当我加载模式并尝试仅打印内容时，它将尝试多次打印相同的确切页面以及尝试打印的页面数等于打印时正文的页数。

阅读可能会造成混淆，因此请visit my fiddle并查看问题。当您单击“打印”时，您会注意到它尝试将我的模态内容打印5次，因为背景主体是5个值得打印的页面内容。

我相信这是因为我的模态具有此属性body.modal-open { visibility: hidden; }并且visibility: hidden;仍然占用页面空间...但是，如果我执行body.modal-open { display: none; }，它将隐藏所有我的模态的内容并打印空白页。

这是我的CSS：

@media print {
  body.modal-open {
    visibility: hidden;
  }

  body.modal-open .modal .modal-header,
  body.modal-open .modal .modal-body {
    visibility: visible;
  }

   .close, #printBtn {
     display: none;
   }
}

这是我的HTML：启动演示模态

<div class="modal-must-live-inside-of-this-body-content">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <button id="printBtn">
            Print this modal
        </button>
        <br /><br />
        Note: This should *ONLY* Print the contents (title, body, etc) of the modal when you click the "Print this modal" button. Which it does, however since the background body content is 12 pages worth of text it prints this same modal 12 times...
        <br /><br />
        I believe this is due to the fact that the background body has the `visibility: hidden` instead of `display: none`.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor congue nisl non tristique. Sed cursus velit non erat finibus molestie. Cras porttitor leo et tristique placerat. Nunc non nisi nec erat vestibulum aliquam sed in mauris. Aliquam erat volutpat. Nulla malesuada enim a tellus luctus commodo. Phasellus porttitor pharetra tellus sit amet accumsan. Nam fringilla leo sit amet tellus eleifend, eu imperdiet eros semper. Ut tristique tempus ligula sed bibendum.

Quisque eu porttitor lacus, et placerat sapien. Curabitur venenatis nec velit quis pulvinar. Nulla vel fermentum sapien, sed hendrerit sapien. Praesent in condimentum leo, nec lobortis elit. Curabitur maximus eros risus, quis luctus augue efficitur in. Nulla iaculis velit felis. Sed sit amet consectetur libero, non laoreet ipsum. Aenean nec elit id leo gravida eleifend. Mauris id sem egestas, vulputate ipsum ut, consequat justo. Mauris malesuada condimentum arcu. Nulla dictum eu nunc id tincidunt. Nulla facilisi. Sed eget purus ac sapien elementum porta. Integer a laoreet ex. Aliquam eu erat pharetra, aliquam turpis non, lacinia libero. Etiam et nisi quis ipsum pharetra egestas.

Nunc hendrerit lacus justo, tempus dignissim quam elementum id. Nullam et volutpat sapien. Ut a cursus ex. Sed magna neque, congue vel massa feugiat, porta iaculis nibh. Maecenas ac consectetur libero. Maecenas tristique posuere libero, sed fermentum neque tristique ac. Sed hendrerit id velit ac sollicitudin. Vivamus gravida sapien in lobortis commodo. Sed sagittis, turpis et mattis lobortis, erat eros rhoncus velit, nec fringilla eros ante interdum nunc.

Nunc cursus finibus egestas. Sed sit amet velit metus. Fusce quis condimentum arcu, a ultricies augue. Vivamus blandit purus eu ex viverra ullamcorper. In sed erat in augue tincidunt euismod. In eget lobortis nunc. Vestibulum non arcu et leo sagittis finibus. Duis pulvinar tellus eget diam dictum pellentesque. Nulla nec mauris metus. Praesent lacinia ipsum scelerisque purus auctor tincidunt. Nam sagittis massa sit amet nisi condimentum, ut dignissim ligula rutrum. Suspendisse accumsan, arcu eu maximus dignissim, purus elit vulputate ante, id rutrum tellus nisi blandit dolor. Proin a lorem vel libero maximus pharetra et a felis. Donec venenatis fermentum lacus non vestibulum.
</div>

Answer 1

也许您的小提琴与您的实际问题并不完全匹配，但是将类应用于正文内容并在同一打印方案中将其标记为display: none;可以防止不必要的分页（请参阅：{{3 }}）

body.modal-open .body-content {
    display: none;
  }

编辑：看起来像原始的小提琴已更新为在与内容相同的元素中显示模态，因此，如果不进行重组，则此想法可能行不通。正确的答案是以某种方式重新构造DOM，尽管在按钮或事件触发以 show 触发模式时可能会在运行时进行操作。

Bootstrap模版可多次打印同一页，具体取决于Chrome中的背景高度

1 个答案: