Question

我在这里做了一个例子，在我的网站上也有同样的问题 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了解打印脚本。

Answer 1

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

使用打印样式区域可能是最佳选择。您只保留当前元素，这样它们就不会丢失处理程序。

我已经修改了你的小提琴，它似乎有效，虽然可能有更多的CSS工作可以做到更好（如文字是浅灰色，你可以强迫它变黑）

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

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

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

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

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

这是css ......

#printme {
  display: none;
}

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

  #printme {
    display: block;
  }

}

Answer 2

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

$(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');
});

显示打印对话框后，jQuery模态窗口被打开

2 个答案: