Question

如何自定义模态内容的打印预览？我想要打印预览按钮并显示模态的内容。

<div class="modal fade printable autoprint" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- modal header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">welcome back</h4>
            </div>
            <!-- modal body-->
            <div class="modal-body"  id="printarea">
                <h1>hello reader!</h1>
                <p>One fine body</p>
            </div>
            <!-- modal footer-->
            <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>
                 <button type="button" class="btn btn-primary" onclick="window.print();">Print preview</button>
            </div>
        </div>

    </div>
</div>

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">print</button>

和 java脚本代码是

function PrintPreview() {

var toPrint = document.getElementById('#printarea');

var popupWin = window.open('', '_blank', 'width=700,height=600,location=no,left=200px');

popupWin.document.open();

popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')

popupWin.document.write(toPrint.innerHTML);

popupWin.document.write('</html>');

popupWin.document.close();

}

我使用这些代码 Twitter Bootstrap: Print content of modal window

自定义模态内容的打印预览

0 个答案: