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() 最好是加上，可以控制打印窗口關閉後 直接 關閉新打開的窗口。