how to create a print modal using javascript, jquery etc

Question

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 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.

possible duplicate of [Print the contents of a DIV](http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) — Brock Adams, Jul 10 '11 at 00:47
See, also: http://stackoverflow.com/questions/2603465/using-jquery-to-open-a-popup-window-and-print — Brock Adams, Jul 10 '11 at 00:48
@Brock Adams thanks! but my requirement is a bit different ...but that link is helpful ...I am gonna add my code ... — paul, Jul 10 '11 at 02:00

tsdexter · Accepted Answer · 2014-09-24T15:29:45.037

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/

how to create a print modal using javascript, jquery etc

1 Answers1

Linked