CODEWITHSUNDEEP
javascriptjquery
dcclassics
dcclassics

Reputation: 896

jQuery Modal Window stuck open after displaying print dialog

I have made an example here, same problem on my site.
http://jsfiddle.net/WnsfD/

<a href="#" data-dismiss="modal" class="btn btn-inverse btn-small" aria-hidden="true" onclick="printDiv('print')"><i class="icon-white icon-print"></i> Print</a>

This is the area I'm having trouble with. (Just because it wouldn't let me post without some code)

I think this is pretty cut and dry here. The javascript pops open the print dialog from the modal window, but once you print or cancel, the modal window is stuck open. I have it set to close just like the Close button, because I noticed you couldn't close it afterwards, but the same effect. I hate to have to refresh the page just to close the modal.

Note: Thanks to user Kevin for the print script.

Upvotes: 2

Views: 3129

Answers (2)

Itz Moosa E. Mohd
Itz Moosa E. Mohd

Reputation: 41

i solved the same issue by just toggle the modal take for instance this is the

$(document).on('click', '#buttonID', function(e){
     var printContents = document.getElementById("DivToPrintID").innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
     $('#ModalID').modal('toggle');
});

Upvotes: 0

FloatingCoder
FloatingCoder

Reputation: 1724

The issue here I believe is that coping the HTML of an element to a variable only keeps the raw HTML, not the JS events and such. Therefore, when you put it back, you don't have the JS events anymore.

Using print style areas is likely the way to go. You leave the current elements alone so they don't lose their handlers.

I've forked an modified your fiddle, and it seems to work, although there's likely more CSS work you could do to make it better (like the text is light grey, you could force it to black)

http://jsfiddle.net/gAtMs/2/

Basically I created a new div for the print area which is empty (id="printme"). In the printDiv function, we copy the html to the printme div, then remove it after the print.

In the CSS for printing we hide everything under the div container, and the modal footer just cause we don't need the buttons on the printout.

We also hide printme in the css for regular screen displays, so the screen doesn't even change when you hit print.

The only reason to copy the HTML to the printme div is to make it easier to hide everything else all at once.

Here's the css...

#printme {
  display: none;
}

@media print {
  .container {
    display: none;
  }
  .modal-footer {
    display: none;
  }

  #printme {
    display: block;
  }

}

Upvotes: 2

Related Questions