help for CSS not affect the normal page

[neo_phyte]

Hi gurus,

I have CSS that would print the content of the modal:

@media screen {
 #printSection {
   display: none;
 }
}

@media print {
 body * {
  visibility:hidden;
 }
 #printSection, #printSection * {
  visibility:visible;
 }
 #printSection {
  position:absolute;
  left:0;
  right:0;
  top:0;
 }
}

My HTML is like this:

<div id="printable">
<div class="modal-header">
<h1>Printable</h1>
</div>

<div class="modal-body">
print content here
</div>
</div>

And my javascript is this:

document.getElementById("btnPrint").onclick = function () {
printElement(document.getElementById("printable"));
}




function printElement(elem) {
var domClone = elem.cloneNode(true);

var $printSection = document.getElementById("printSection");

if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}

$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}

ISSUE: This will work only on the modal but when I print it a non-modal pages it will display blank. If I removed the:

body * {
  visibility:hidden;
 }

That will affect also the modal.

What would I add to my CSS so it would work both?


Thanks

[lucy24]

First thing that jumps out at me is the two forms

display: none
visibility: hidden

They work in different ways and do different things-- and, most important, they have no effect on each other.

Coincidentally I was looking up these properties just a few days ago. Crucial detail under "display: none" (emphasis theirs):

Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

"visibility" otoh can be toggled off and on.

An easy copout solution is to distribute the entire document among two classes of div, like "printstyle" and "screenstyle", with mirror-imaged @media rules. (I've personally done this, though admittedly not for an entire document.)

when I print it a non-modal pages

Now, if I could figure out whether you mean "model" or "modal", and what it refers to...

[neo_phyte]

I was referring to Bootsrap modal.

[twitter.github.io ]