Twitter Bootstrap: Print content of modal window box

 <!-- preview Modal -->        <style>
            /*general styles*/          .printable{display:none;}
           /* print styles*/           @media print {
               .printable {display:block;}
               .screen {display:none;}
               body {margin: 10px 10px 10px 10px;}
               @page {margin: 0;}
           }
        </style>



    <div id="order_preview" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" id="addRoomItem">
            <!-- Modal Content -->
            <div class="modal-content">
                <div class="modal-body">
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-md-12 col-lsm-12 col-xs-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h2 id="m_title">Order preview</h2>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <form id="add_data_form" method="post" class="form-horizontal form-label-left" action="/material/material_management/update_resource_quantity">
                                        <!-- project idx  ------------------------------------ -->                                        <div class="hidden">

                                        </div>

                                        <!-- resource quantity  ------------------------------------ -->                                        <input type="hidden" data-ride="spinner" id="qty_spinner" name="resource_quantity" class="form-control input-number text-center" value="1" data-min="0" data-max="1">

                                        <div class="text-center" id="order_preview_body">

                                        </div>


                                    </form>
                                </div>

                                <!-- Button ------------------------------------ -->                                <div class="ln_solid col-md-12 col-sm-12 col-xs-12 hidden-print"></div>
                                <div>
                                    <button type="submit" id="send_order_email_btn" class="pull-right btn btn-primary"><i class="glyphicon glyphicon-envelope"></i>  Go Email</button>
                                    <button id="print"  type="button" id="send_order_print_btn" class="pull-right btn btn-primary print"><i class="glyphicon glyphicon-print"></i> Go Print</button>

                                    <button type="button" class="pull-right btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- //Modal Content -->            <!-- print div  -->
        </div>
    </div>  <!-- //Modal -->
<script>
    $(function() {
        //프린트 이벤트 바인딩        $(".print").on("click", function() {

            domPrint( $(".x_content")[1] );
           // domPrint( document.getElementById("modal-content") );        });
    });

    function domPrint(obj) {
        var newWin = window.open("출력창","_blank");
        var doc = obj.innerHTML;

        newWin.document.write(doc);
        newWin.document.close();

        newWin.print();
        newWin.close();
    }

</script>

댓글