0
127
ViewsMozilla Firefox printing Modal data along with the div that is to be printed
```
<div class="maindiv></div>
<div class="printablediv"></div>
function printData()
{
$('#ProductIdModal').modal('hide');
$(".maindiv").css('display','none');
$(".Printablediv").css('display','block');
$('.modal-backdrop').remove();
window.print();
}
window.addEventListener("afterprint", myFunction);
function myFunction() {
$(".maindiv").css('display','block');
$(".Printablediv").css('display','none');
}
```I have a written a function to print a div on Ajax success named printData(). Ajax call is made from a button which is on the modal named ProductModal
The print preview I get in chrome is fine but the modal gets displayed in mozilla firefox below the div.
Print Preview in chrome :
Print Preview in mozilla :
·
Juan Pablo Isaza
1 answers
Answer question0
Try using a print media query. For your case, I'm not sure if you need to apply the styles to the page or the modal.
These CSS styles are automatically applied only when printing, even through the browser. You can change the style or hide things.
/* print styles. put these at the end of your css. */
@media print {
/* some of yours, copied from the js function: */
.modal { display: none; }
.maindiv { display: none; }
.Printablediv { display: block; }
/* other. */
* { color:#333; }
html { height:auto; }
.otherThing { font-size: 20pt; }
}
Hope that works.
·
Juan Pablo Isaza
Report
Answer question