2

我在这里做了一个例子，我的网站上有同样的问题。
http://jsfiddle.net/WnsfD/

<a href="#" data-dismiss="modal" class="btn btn-inverse btn-small" aria-hidden="true" onclick="printDiv('print')"><i class="icon-white icon-print"></i> Print</a>

这是我遇到麻烦的领域。（只是因为它不会让我在没有一些代码的情况下发布）

我认为这在这里很简单。javascript 会从模态窗口弹出打开打印对话框，但是一旦您打印或取消，模态窗口就会卡在打开状态。我将它设置为关闭，就像关闭按钮一样，因为我注意到您之后无法关闭它，但效果相同。我讨厌必须刷新页面才能关闭模式。

注意：感谢用户Kevin提供的打印脚本。

4

2 回答 2

2

我认为这里的问题是，将元素的 HTML 复制到变量只会保留原始 HTML，而不是 JS 事件等。因此，当你把它放回去时，你就没有 JS 事件了。

使用打印样式区域可能是要走的路。您不理会当前元素，以免它们丢失处理程序。

我已经修改了你的小提琴，它似乎可以工作，尽管你可以做更多的 CSS 工作来使它更好（比如文本是浅灰色的，你可以强制它变黑）

http://jsfiddle.net/gAtMs/2/

基本上我为空的打印区域创建了一个新的 div (id="printme")。在 printDiv 函数中，我们将 html 复制到 printme div 中，然后在打印后将其删除。

在用于打印的 CSS 中，我们将所有内容隐藏在 div 容器下，而模态页脚只是因为我们不需要打印输出上的按钮。

我们还将 printme 隐藏在 css 中以进行常规屏幕显示，因此当您点击打印时屏幕甚至不会改变。

将 HTML 复制到 printme div 的唯一原因是更容易一次隐藏所有其他内容。

这是css...

#printme {
  display: none;
}

@media print {
  .container {
    display: none;
  }
  .modal-footer {
    display: none;
  }

  #printme {
    display: block;
  }

}
于 2013-01-31T00:52:30.923 回答
0

我通过切换模式解决了同样的问题，例如这是

$(document).on('click', '#buttonID', function(e){
     var printContents = document.getElementById("DivToPrintID").innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
     $('#ModalID').modal('toggle');
});
于 2021-08-01T12:01:19.970 回答