我正在使用Bootstrap开发一个站点，它有28个模态窗口，其中包含不同产品的信息。我希望能够在开放模式窗口中打印信息。每个窗口都有一个id。
<!-- firecell panel & radio hub -->
<div class="modal hide fade" id="fcpanelhub">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3>5000 Control Panel & Radio Hub</h3>
</div>
<div class="modal-body">
<img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
因此，如果我在modal-footer中添加一个新按钮 - 'print'，然后单击它我想要打印模态。我会说javascript会被使用吗？如果是这样，我如何告诉javascript只打印开放模式，而不是其他模式？
所有帮助赞赏。
这是一个基于Bennett McElwee answer的新解决方案，如下所述。
使用IE 9和10，Opera 12.01，Google Chrome 22和Firefox 15.0进行测试。 same question
jsFiddle example
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
您已准备好在您的网站上打印任何元素！
只需使用您的元素调用function printElement(elem, append, delimiter) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
$printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
if (append !== true) {
$printSection.innerHTML = "";
}
else if (append === true) {
if (typeof (delimiter) === "string") {
$printSection.innerHTML += delimiter;
}
else if (typeof (delimiter) === "object") {
$printSection.appendChild(delimiter);
}
}
$printSection.appendChild(domClone);
}
并在完成后执行printElement()。
注意：如果要在打印前修改内容（并且仅在打印版本中），请查看此示例（由评论中的waspina提供）：window.print()
也可以使用CSS来显示打印版本中的附加内容（并且仅在那里）。
我想，你必须通过CSS隐藏网站的所有其他部分。
将所有不可打印的内容移动到单独的http://jsfiddle.net/95ezN/121/中是最好的：
DIV然后在你的CSS中：
<body>
<div class="non-printable">
<!-- ... -->
</div>
<div class="printable">
<!-- Modal dialog comes here -->
</div>
</body>
积分转到.printable { display: none; }
@media print
{
.non-printable { display: none; }
.printable { display: block; }
}
，他已经回答了类似的问题：Greg
使用JavaScript存在一个问题：用户无法看到预览 - 至少在Internet Explorer中是这样！
$("#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
});
@media print{
body{
visibility: hidden; /* no print*/
}
.print{
visibility:visible; /*print*/
}
}我建议你试试这个jQuery插件Print <div id="printarea"></div> only?
它可以让您只打印您选择的元素。
使用当前接受的解决方案，您无法再打印包含对话框本身的页面。这是一个更加动态的解决方案：
JavaScript的：
print element
CSS：
$().ready(function () {
$('.modal.printable').on('shown.bs.modal', function () {
$('.modal-dialog', this).addClass('focused');
$('body').addClass('modalprinter');
if ($(this).hasClass('autoprint')) {
window.print();
}
}).on('hidden.bs.modal', function () {
$('.modal-dialog', this).removeClass('focused');
$('body').removeClass('modalprinter');
});
});
例：
@media print {
body.modalprinter * {
visibility: hidden;
}
body.modalprinter .modal-dialog.focused {
position: absolute;
padding: 0;
margin: 0;
left: 0;
top: 0;
}
body.modalprinter .modal-dialog.focused .modal-content {
border-width: 0;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
body.modalprinter .modal-dialog.focused .modal-content .modal-body,
body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
visibility: visible;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header,
body.modalprinter .modal-dialog.focused .modal-content .modal-body {
padding: 0;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
margin-bottom: 20px;
}
}
这是一个使用JQuery扩展的选项，我在接受的答案的注释中基于waspinator的代码制作：
<div class="modal fade printable autoprint">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="window.print();">Print</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
的jsfiddle：jQuery.fn.extend({
printElem: function() {
var cloned = this.clone();
var printSection = $('#printSection');
if (printSection.length == 0) {
printSection = $('<div id="printSection"></div>')
$('body').append(printSection);
}
printSection.append(cloned);
var toggleBody = $('body *:visible');
toggleBody.hide();
$('#printSection, #printSection *').show();
window.print();
printSection.remove();
toggleBody.show();
}
});
$(document).ready(function(){
$(document).on('click', '#btnPrint', function(){
$('.printMe').printElem();
});
});
如果您不希望将此应用于每个打印件并且只在自定义打印按钮上执行此操作（这是我的情况），这将非常有用。
这是一个修改后的解决方案，也适用于使用Grails模板渲染的模态窗口，您可以在同一个主体中使用相同的模式模板多次调用（具有不同的值）。这个帖子对我帮助很大，所以我想我会分享它以防其他Grails用户在这里找到他们的方式。
对于那些好奇的人来说，接受的解决方案对我不起作用，因为我正在渲染一张桌子;每行都有一个按钮，打开一个模态窗口，其中包含有关该记录的更多详细信息。这导致创建多个printSection div并将它们打印在彼此之上。因此，我必须修改js以在打印完成后清理div。
我将这个CSS直接添加到我的模态gsp中，但将其添加到父级具有相同的效果。
http://jsfiddle.net/95ezN/1227/
将其添加到站点范围的CSS会破坏站点其他部分的打印功能。我从<style type="text/css">
@media screen {
#printSection {
display: none;
}
}
@media print {
body > *:not(#printSection) {
display: none;
}
#printSection, #printSection * {
visibility: visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
</style>
接受的答案（基于ComFreak）得到了这个，但它是使用Bennett McElwee answer对fanfavorite的回答使用'：not'功能进行修改。我选择“显示”而不是“可见性”，因为我看不见的正文内容正在创建额外的空白页面，这对我的用户来说是不可接受的。
这是我的javascript，修改自Print <div id=printarea></div> only?接受的这个问题的答案。
ComFreak
我不需要添加元素，所以我删除了这个方面并更改了函数以专门打印div。
和模态模板。这将打印模态标题和正文，并排除按钮所在的页脚。
function printDiv(div) {
// Create and insert new print section
var elem = document.getElementById(div);
var domClone = elem.cloneNode(true);
var $printSection = document.createElement("div");
$printSection.id = "printSection";
$printSection.appendChild(domClone);
document.body.insertBefore($printSection, document.body.firstChild);
window.print();
// Clean up print section for future use
var oldElem = document.getElementById("printSection");
if (oldElem != null) { oldElem.parentNode.removeChild(oldElem); }
//oldElem.remove() not supported by IE
return true;
}
我希望能帮助别人！
我只是使用了一些jQuery / javascript：
HTML：
<div class="modal-content">
<div id="print-me"> <!-- This is the div that is cloned and printed -->
<div class="modal-header">
<!-- HEADER CONTENT -->
</div>
<div class="modal-body">
<!-- BODY CONTENT -->
</div>
</div>
<div class="modal-footer">
<!-- This is where I specify the div to print -->
<button type="button" class="btn btn-default" onclick="printDiv('print-me')">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS：
<h1>Don't Print</h1>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch modal</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal to print</h3>
</div>
<div class="modal-body">
<p>Print Me</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="printButton">Print</button>
</div>
</div>
这是$('#printButton').on('click', function () {
if ($('.modal').is(':visible')) {
var modalId = $(event.target).closest('.modal').attr('id');
$('body').css('visibility', 'hidden');
$("#" + modalId).css('visibility', 'visible');
$('#' + modalId).removeClass('modal');
window.print();
$('body').css('visibility', 'visible');
$('#' + modalId).addClass('modal');
} else {
window.print();
}
});
这是一个没有Javascript或插件的解决方案 - 只需要一些css和一个标记中的额外类。此解决方案使用BootStrap在打开对话框时向正文添加类的事实。我们使用此类隐藏正文，并仅打印对话框。
为了确保我们可以确定页面的主体，我们需要在div中包含主页内容中的所有内容 - 我使用了id =“mainContent”。下面的示例页面布局 - 带有主页面和两个对话框
the fiddle
然后在我们的CSS打印媒体查询中，我使用display：none隐藏我不想显示的所有内容 - 即打开对话框时的mainContent。我还使用特定的类noPrint在页面的任何不应显示的部分上使用 - 比如操作按钮。在这里，我也隐藏了页眉和页脚。您可能需要调整它以获得您想要的确切需求。
<body>
<div class="container body-content">
<div id="mainContent">
main page stuff
</div>
<!-- Dialog One -->
<div class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Dialog Two -->
<div class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
</div>
</body>
我遇到了两个问题问题1：所有字段都是一个接一个地出现，当用于从弹出窗口打印时，在页面底部发出2个空格。
我解决了这一点
对所有正文*显示无显示元素大多数都隐藏可见性，这会创建空间，从而避免隐藏可见性
@media print {
header, .footer, footer {
display: none;
}
/* hide main content when dialog open */
body.modal-open div.container.body-content div#mainContent {
display: none;
}
.noPrint {
display: none;
}
}
你可以从这个源 @media print {
body * {
display:none;
width:auto;
height:auto;
margin:0px;padding:0px;
}
#printSection, #printSection * {
display:inline-block!important;
}
#printSection {
position:absolute;
left:0;
top:0;
margin:0px;
page-break-before: none;
page-break-after: none;
page-break-inside: avoid;
}
#printSection .form-group{
width:100%!important;
float:left!important;
page-break-after: avoid;
}
#printSection label{
float:left!important;
width:200px!important;
display:inline-block!important;
}
#printSection .form-control.search-input{
float:left!important;
width:200px!important;
display: inline-block!important;
}
}
下载printThis lib并将其包含在你的html页面中
调用以下jquery来打印所有内容，包括不可查看的内容。如果您有多个css文件，则可以将css文件包含在数组中。
https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js