[ACCEPTED]-print a modal window not the rest of the page-css
From the sound of it, your modal element 17 is inside of the container. I'm guessing 16 you have markup like this.
<div id="container">
<span>children</span>
<p>more children>
<div id="modal">
Modal text!
</div>
</div>
And CSS like this...
.noprint { display: none;}
.print {display: block;}
Which 15 you use JavaScript to apply, like this:
<div id="container" class="noprint">
<span>children</span>
<p>more children>
<div id="modal" class="print">
Modal text!
</div>
</div>
In 14 these examples, the #modal element is inside of 13 a hidden container. The CSS spec dictates 12 that if a parent element is hidden, all 11 children will be hidden also, even if they 10 are set to display: block (or any other valid display value) or 9 are absolutely positioned.
What you should 8 do if you want to hide everything on the 7 page except for your modal window is get 6 your markup to be structured something like 5 this:
<div id="modal">
Modal Text!
</div>
<div id="container">
<span>children</span>
<p>more children>
<div id="modal">
Modal text!
</div>
</div>
If you have no control over where the 4 modal element is rendered, you can use jQuery 3 to re-position the modal element. Keep in 2 mind that this may impact your modal window's 1 layout:
// Moves the element outside of the hidden container
$("#container").before($("#modal"));
There is another way to print modal window 3 contents. Add this function to modal window
I 2 have tried this and it works. You only need 1 to play around with stylesheets.
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.