Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

help for CSS not affect the normal page

12:54 am on May 17, 2013 (gmt 0)

New User

joined:May 17, 2013
posts: 2
votes: 0

Hi gurus,

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

@media screen {
#printSection {
display: none;

@media print {
body * {
#printSection, #printSection * {
#printSection {

My HTML is like this:

<div id="printable">
<div class="modal-header">

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

And my javascript is this:

document.getElementById("btnPrint").onclick = function () {

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

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

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

$printSection.innerHTML = "";

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 * {

That will affect also the modal.

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

3:23 am on May 17, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 459

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...
3:46 am on May 17, 2013 (gmt 0)

New User

joined:May 17, 2013
posts: 2
votes: 0

I was referring to Bootsrap modal.

[twitter.github.io ]

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members