Mozilla Firefox printing Modal data along with the div that is to be printed

user_15563458 0
Viewed 86

```
<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 : enter image description here

Print Preview in mozilla : enter image description here

mozilla google-chrome printing html javascript
1 Answers

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.

user_11717020
Related