There is a list of links when choosing one of them opens a blog with a form, when you click on submit, a modal bootstrap window opens, the window displays a preview of a certain blog div and button "Print" to print this blog and button "cancel". When you click on print, the standard browser print page opens up to this point, everything works, if you click on print, the page goes to print and the modal preview window does not close at all, even if you click cancel.
<div class="modal fade bd-example-modal-lg" id="main-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ---------------------------------------- <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" onclick="closeModalWindow()"; value="print a div!">Print</button> </div> </div> </div> </div> Print function:
function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } function closeModalWindow(){ printDiv('tmp-1'); var mainModalWindow=$('#main-modal'); mainModalWindow.hide(); }