Twitter Bootstrap：打印模态窗口的内容
我正在开发一个使用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>
所以，如果我添加一个新的buttonmodal-footer – “打印”，并点击我想打印的模式。 我会正确地说javascript会被使用吗？ 如果是这样，我怎么告诉JavaScript打印只打开模式，而不是其他人？
所有帮助赞赏。
解决scheme
这是一个基于Bennett McElwee解答的新解决scheme，如下所述。
testing了IE 9和10，Opera 12.01，Google Chrome 22和Firefox 15.0。
jsFiddle的例子
1.）将这个CSS添加到您的网站：
@media screen { #printSection { display: none; } } @media print { body * { visibility:hidden; } #printSection, #printSection * { visibility:visible; } #printSection { position:absolute; left:0; top:0; } }
2.）添加我的JavaScriptfunction
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.appendChlid(delimiter); } } $printSection.appendChild(domClone); }
您已准备好在您的网站上打印任何元素！
只需在元素中调用printElement()并在完成时执行window.print() 。
注意：如果您想在打印内容之前修改内容（仅在打印版本中），请检查此示例（由评论中的waspina提供）： http : //jsfiddle.net/95ezN/121/
也可以使用CSS来显示打印版本中的附加内容（并且仅在那里）。
以前的解决scheme
我想，你必须通过CSS隐藏网站的所有其他部分。
将所有不可打印的内容转移到单独的DIV ：
<body> <div class="non-printable"> <!-- ... --> </div> <div class="printable"> <!-- Modal dialog comes here --> </div> </body>
然后在你的CSS：
.printable { display: none; } @media print { .non-printable { display: none; } .printable { display: block; } }
积分转到已经回答了类似问题的Greg ：只打印<div id = printarea> </ div>？
我在使用JavaScript时看到一个问题 ：用户看不到预览 – 至less在Internet Explorer中！
我build议你试试这个jQuery插件打印元素
它可以让你打印你select的元素。
使用目前接受的解决scheme，您不能再打印包含对话框的页面。 这是一个更加dynamic的解决scheme：
JavaScript的：
$().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'); }); });
CSS：
@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; } }
例：
<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 -->
这是一个修改后的解决scheme，它也适用于使用Grails模板呈现的模态窗口，您可以在同一个主体中使用多次调用相同的模态模板（使用不同的值）。 这个主题对我非常有帮助，所以我想我会分享它，以防其他Grails用户在这里find方法。
对于那些好奇的人来说，接受的解决scheme对我来说并不起作用，因为我在摆弄桌子; 每行都有一个button，打开一个模式窗口，关于logging的更多细节。 这导致多个printsection div被创build和打印在彼此之上。 因此，我不得不修改js来清理div完成打印后。
CSS
我将这个CSS直接添加到我的模态gsp，但将其添加到父项具有相同的效果。
<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>
将其添加到站点范围的CSS中会导致网站其他部分的打印function无法使用。 我从ComFreak的回答中得到了这个答案（基于Bennett McElwee的答案 ），但是它只是用fanfavorite在Print <div id = printarea> </ div>上的答案修改为“：not”function。 。 我select了“展示”而不是“知名度”，因为我看不见的内容正在创build额外的空白页面，这是我的用户无法接受的。
JS
而这个以我的javascript，从ComFreak对这个问题接受的答案修改而来。
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; }
我没有需要追加元素，所以我删除了这个方面，并改变了专门打印一个div的function。
HTML（gsp）
和模态模板。 这将打印模式标题和正文，并排除页脚位于button的位置。
<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>
我希望能帮助别人！
下面是一个选项，使用我在接受的答案的评论中基于代码的基于代码的JQuery扩展：
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(); }); });
JSFiddle： http : //jsfiddle.net/95ezN/1227/
如果您不希望将其应用于每一个打印，只需在您的自定义打印button（这是我的情况）上执行此操作，这可能会很有用。
我只是使用一些jQuery / javascript：
HTML：
<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>
JS：
$('#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或插件的解决scheme – 只是一些CSS和一个额外的类在标记。 此解决scheme使用BootStrap在打开对话框时向主体添加类的事实。 我们使用这个类来隐藏主体，只打印对话框。
为了确保我们可以确定页面的主体，我们需要在div的主页面内容中包含所有内容 – 我使用了id =“mainContent”。 下面的示例页面布局 – 带有主页面和两个对话框
<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>
然后，在我们的CSS打印媒体查询中，我使用display：none来隐藏我不想显示的所有内容 – 即打开对话框时的mainContent。 我还使用特定的类noPrint在页面的任何不应该显示的部分使用 – 比如动作button。 在这里我也隐藏了页眉和页脚。 你可能需要调整它来得到你想要的。
@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; } }
我遇到了两个问题问题1：所有字段都是一个接一个地出现在页面底部的问题2空白处，用于从popup窗口打印。
我解决了这个
使所有的身体*元素都不显示 ，其中大部分都是隐藏的可见性，从而创build空间，从而避免可见性隐藏
@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; } }
