2

Just now I am working on print function using JavaScript to print the content of my website. I can print the content of my site fine with just a direct content. But the problem is that printing the content with bootstrap modal popup seems to be different from what I have done. Below is the printing code of normal content I have implemented.

HTML:

<div id="printArea">
            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="mSchedule" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content" style="width: 1000px;" >
                        <div class="modal-header">
                            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                            <button type="button" id="printer" class="btn btn-info">Print</button>
                            <h4 class="modal-title">Repayment Schedule</h4>
                        </div>
                        <div class="modal-body"  id ="schedule-table">

                        </div>
                    </div>
                </div>
            </div>
        </div>

JS:

$(document).ready(function(){
    $(document).on('click', '#printer', function (event) {
        event.preventDefault();
        var $print = $("#printArea");
        $(document.body).wrapInner('<div style="display: none"></div>');
        var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
        window.print();
        $div.remove();
        $(document.body).children().contents().unwrap();
    });
});

I know that this code is working fine with printing normal content, But I have no idea how to print a bootstrap popup modal.

Any help really appreciate.

GuRu
  • 1,880
  • 3
  • 23
  • 32
Tum Lina
  • 477
  • 1
  • 7
  • 18
  • can you please turn your code into a [snippet](http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)? – tavnab Jun 22 '15 at 03:16
  • newWin.document.write( newhtml ); newWin.window.location.reload(); // this is the secret ingredient newWin.focus(); // not sure if this line is necessary newWin.print(); I'm not 100% sure why this works but I think it has to do with one of the following: (1) an IE security issue, (2) a scope issue (i.e. after creating a new document, IE is confused about which document to print), or (3) a timing issue - the document is not ready to 'accept' a print command yet. In any case, after the reload the print dialogue appears without a problem. – Parth Trivedi Jun 22 '15 at 05:18
  • You might want to consider the advice here, in [another question](http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window). – Wayne Smallman Aug 20 '15 at 09:13

0 Answers0