Twitter Bootstrap：打印模态窗口的内容 [英] Twitter Bootstrap: Print content of modal window
问题描述
我正在使用Bootstrap开发一个站点，它有28个模态窗口，其中包含不同产品的信息。我希望能够在开放模式窗口中打印信息。每个窗口都有一个 id 。
<！ - firecell panel&无线电中心 - >
< div class =modal hide fadeid =fcpanelhub>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modal> X< / button>
< h3> 5000控制面板&无线电中心< / h3>
< / div>
< div class =modal-body>
< img src =../ site / img / firecell / firecell-panel-info-1.pngalt =/>< hr />
< img src =../ site / img / firecell / firecell-panel-info-2.pngalt =/>< hr />
< img src =../ site / img / firecell / firecell-radio-hub-info-1.pngalt =/>< hr />
< img src =../ site / img / firecell / firecell-radio-hub-info-2.pngalt =/>
< / div>
< div class =modal-footer>
< a href =＃class =btndata-dismiss =modal>关闭< / a>
< / div>
< / div>
因此，如果我在 modal-footer中添加一个新按钮 - 'print'，点击它我希望打印模态。我会说javascript会被使用吗？如果是这样，我怎么告诉javascript只打印开放模式，而不打印其他模式？
所有帮助表示赞赏。
另一个解决方案
这是一个基于 Bennett McElwee在同样的问题中回答，如下所述。
使用IE 9& C测试10，Opera 12.01，谷歌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;
左：0;
top：0;
}
}
2。）添加我的JavaScript函数
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 + =分隔符;
}
else if（typeof（delimiter）===object）{
$ printSection.appendChild（delimiter）;
}
}
$ printSection.appendChild（domClone）;
}
您已准备好在您的网站上打印任何元素！
只需使用您的元素调用 printElement（）并执行 window.print（）当你完成时。
注意：
如果你想在之前修改内容打印（仅在打印版本中），结帐此示例（由评论中的waspina提供）： http：/ /jsfiddle.net/95ezN/121/
还可以使用CSS来显示打印版本中的其他内容（仅在那里）。
以前的解决方案
我想，你必须通过CSS隐藏网站的所有其他部分。
将所有不可打印的内容移动到单独的 DIV中是最好的
< body>
< div class =non-printable>
<！ - ... - >
< / div>
< div class =printable>
<！ - 模态对话框来到这里 - >
< / div>
< / body>
然后在你的CSS中：
.printable {display：none; }
@media print
{
.non-printable {display：none; }
.printable {display：block; }
}
积分转到 Greg 已经回答了类似的问题：打印< div id =" printarea">< / div>只有？
使用JavaScript时出现一个问题：用户无法看到预览 - 至少在Internet Explorer中是这样的！ / p>
I'm developing a site using Bootstrap which has 28 modal windows with information on different products. I want to be able to print the information in an open modal window. Each window has an 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>
So if I add in a new button in modal-footer - 'print', and it's clicked I want that modal to print. Would I be right in saying javascript would be used? If so, how do I tell javascript to print only the open modal, and not the others?
All help appreciated.
Another solution
Here is a new solution based on Bennett McElwee answer in the same question as mentioned below.
Tested with IE 9 & 10, Opera 12.01, Google Chrome 22 and Firefox 15.0.
jsFiddle example
1.) Add this CSS to your site:
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
2.) Add my JavaScript function
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);
}
You're ready to print any element on your site!
Just call printElement() with your element(s) and execute window.print() when you're finished.
Note: If you want to modify the content before it is printed (and only in the print version), checkout this example (provided by waspina in the comments): http://jsfiddle.net/95ezN/121/
One could also use CSS in order to show the additional content in the print version (and only there).
Former solution
I think, you have to hide all other parts of the site via CSS.
It would be the best, to move all non-printable content into a separate DIV:
<body>
<div class="non-printable">
<!-- ... -->
</div>
<div class="printable">
<!-- Modal dialog comes here -->
</div>
</body>
And then in your CSS:
.printable { display: none; }
@media print
{
.non-printable { display: none; }
.printable { display: block; }
}
Credits go to Greg who has already answered a similar question: Print <div id="printarea"></div> only?
There is one problem in using JavaScript: the user cannot see a preview - at least in Internet Explorer!
这篇关于Twitter Bootstrap：打印模态窗口的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
