Avani Avani - 29 days ago 5
jQuery Question

why my $('body').css('visibility', 'hidden'); is not working with Safari?

I am trying to print modal content and my code is working fine with

chrome
but it is not working with
safari
. I'm hiding body content using jQuery
$('body').css('visibility', 'hidden');
. I also tried using
opacity:0
and
opacity:1
instead of
visibility
but it didn't work. Below is the code I am using to print modal content

function printBtnOpen() {
var modalId = $(event.target).closest('.modal').attr('id');
$("#" + modalId).css('visibility', 'visible');
$('.panel-collapse').collapse('show');
$('.modal-body').css('max-height', 'none');
setTimeout(function() {
$('body').css('visibility', 'hidden');
window.print();
$('body').css('visibility', 'visible');
$('.modal-body').css('max-height', '688px');
},1000);
}

Answer Source

You could try to accomplish this using the @media print CSS directive as oppose to JavaScript:

@media print {
    body {
        visibility: hidden;
    }
    .modal-body {
        max-height: none;
    }
}

You can add this to your existing external stylesheet or separate this out into a new stylesheet, for example one called print.css. If you take the route of separating the content into a separate stylesheet, you can add a link tag that looks like the following:

<link type="text/css" rel="stylesheet" href="print.css" media="print" />

The media="print" directive helps the browser to know which media the linked resource applies to.

Reference: