Bootstrap modal弹出框实现打印的功能

页面上引入bootstrap 相关 js 

html 页面：

<div class="modal fade" id="popPrintSheet" role="dialog" aria-labelledby="printSheet" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog middle-size">
        <div class="modal-content marginT20px">
        	<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="printSheetTitle" >CoverSheet Print</h4>
            </div>
            <div class="modal-body left20pc-right" style="height:800px; overflow:scroll;">
	            <div id="showCoverSheetTmpl" style="display: none;"></div>
            </div>
		</div>
	</div>
</div>

html 页面 的 class="modal-body 可以 设置一些样式，控制内容，

js：

通过事件把上面的 modal 弹出，$("#popPrintSheet").modal();

这个页面上也可以增加一个 打印的按钮直触发输内容；

下面的是 打印方法：

var printpage = function (myDiv){    
		var printHtml = document.getElementById(myDiv).innerHTML;
		var wind = window.open("", "newwin", "toolbar=no,scrollbars=yes,menubar=no");
		var ss = "<style>"
				+".coversheet-pageBoder{"
				+"	padding: 10px;" 
				+"	margin-top: 10px;"
				+"	border: 1px solid gray;"
				+"	page-break-after: always;"
				+"	border-radius: 5px;"
				+"	box-shadow: 0 1px 2px 1px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.08);"
				+"}"
				+".noprint{display: none;}"
				+"</style>";
		
		printHtml = ss + printHtml;
		wind.document.body.innerHTML = printHtml;
		wind.print();
		wind.close();
	};

mydiv 输出内容的div

ss可以增加一些样式 控制弹出页面；

wind.close() 最好是加上，可以控制打印窗口关闭后 直接 关闭新打开的窗口。