how to create a print modal using javascript, jquery etc_问答_开发者

how to create a print modal using javascript, jquery etc

开发者 https://www.devze.com 2023-03-19 07:22 出处：网络

let say i have a print button on couple of pages and whenever user click . it will pop up the content in a modal and can print from there.Any idea will be 开发者_JAVA百科appreciated.

I have couple of page with a print button . when user click it need to pul that content in a modal and than print from that modal.

I can't write the code for you right now but I can put you on the right track..

You need to use jquery to get the contents you want to print (likely $('body').html();) then create your modal div popup and add an iframe into the modal div. Then add to the iframes body (via $('iframe').document.body.append();) the print content. Then, call print on the iframe ($('iframe').window.print;)

Let me know if this makes sense?

EDIT: Here is some example code working with what I believe you want. (make sure you include jquery before this javascript code)

    <body>
        <script>
        $(document).ready(function(){
            $('#printmodal').click(function(){

                // variables
                var contents = $('#printable').html();
                var frame = $('#printframe')[0].contentWindow.document;

                // show the modal div
                $('#modal').css({'display':'block'});

                // open the frame document and add the contents
                frame.open();
                frame.write(contents);
                frame.close();

                // print just the modal div
                $('#printframe')[0].contentWindow.print();
            });
        });
        </script>
        <style>
            #modal {
                display: none;
                width: 100px;
                height: 100px;
                margin: 0 auto;
                position: relative;
                top: 100px;
            }
        </style>

        <!-- Printable div (or you can just use any element) -->
        <div id="printable">
            <p>This is</p>
            <p>printable</p>
        </div>

        <!-- Print link -->
        <a id="printmodal" href="#">Print Me</a>

        <!-- Modal div (intially hidden) -->
        <div id="modal">
            <iframe id="printframe" />  
        </div>
    </body>

jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/