如何打印整个引导模式，其中模态体中的内容滚动到视图外

问题是用户必须向下滚动才能查看模态体内的所有内容。 但是，当我打印模态时，唯一打印的部分是可查看的部分。 我希望打印整个模态的内容。 我已经尝试了下一页的每一段代码，但没有一段代码打印整个模态。

Twitter Bootstrap：打印模态窗口的内容

Answer 1

从以下链接下载printThis.js并将其包含在您的html中： https ： //github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

使用以下div包装要打印的内容。 此div之外的所有内容都不会被打印出来。

 
 ..content to print..  

调用以下jquery来打印所有内容，包括不可查看的内容。 如果您有多个css文件，则可以将css文件包含在数组中。

 $("#modalDiv").printThis({ debug: false, importCSS: true, importStyle: true, printContainer: true, loadCSS: "../css/style.css", pageTitle: "My Modal", removeInline: false, printDelay: 333, header: null, formValues: true }); 

Answer 2

与angularjs UI bootstrap库面临同样的问题。 试过上面提供的链接，但没有运气。 当模态比视口更长时，唯一适用于我的CSS是：

 @media print { .modal { position: absolute; left: 0; top: 0; margin: 0; padding: 0; overflow: visible!important; } } 

注意： position:absolute和overflow:visible 必须有。 希望这也可以在打印angularUI-Bootstrap-Modal时解决您的问题。

Answer 3

我认为使用@media print可以轻松地使用CSS：

如果有打开的bootstrap模态窗口，将打印模态的内容（它可以是多个页面），在其他情况下窗口的内容。

 @media print { /* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */ body.modal-open { visibility: hidden; } body.modal-open .modal .modal-header, body.modal-open .modal .modal-body { visibility: visible; /* make visible modal body and header */ } } 

您还可以在模态页脚上添加按钮进行打印：

 
 print modal content  

Answer 4

@Abu Sulaiman：使用它仍然只打印出模态中显示的部分。 要显示隐藏的部分，尤其是当您的内容溢出时，请更改removeInline: true ，如下所示。 对我来说很好。

从以下链接下载printThis.js并将其包含在您的html中： https ： //github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

使用以下div包装要打印的内容。 此div之外的所有内容都不会被打印出来。

..内容打印..

调用以下jquery来打印所有内容，包括不可查看的内容。 如果您有多个css文件，则可以将css文件包含在数组中。

 $("#modalDiv").printThis({ debug: false, importCSS: true, importStyle: true, printContainer: true, loadCSS: "../css/style.css", pageTitle: "My Modal", removeInline: true, printDelay: 333, header: null, formValues: true });