javascript - jQuery 模态窗口在显示打印对话框后卡住打开

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 事件了。

使用打印样式区域可能是可行的方法。您不理会当前元素，这样它们就不会丢失它们的处理程序。

我 fork 了一个修改过的你的 fiddle ，它似乎可以工作，尽管你可能需要做更多的 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;
  }

}