打印模式窗口而不是页面的其余部分 [英] print a modal window not the rest of the page

问题描述

这是我的HTML示例片段：

$

b
$ b

 < id = container> children< id =modal> children< / modal>< / container> 
  

如果我弹出打开模态有一个打印按钮。当我点击它我使用jQuery应用 .noprint 到 #container 和 .print 到 #modal 。但是 .print 到modal被忽略，无论我应用什么选择器，我都无法获得模态内容。更糟糕的是，我不能使用firebug，它不显示我正在应用什么样的打印样式。我试过
#container＃modal.print {display：block; } 等...

谢谢！

解决方案>

从它的声音，你的模态元素是在容器内。我猜你有这样的标记。

 < div id =container 
< span> children< / span> 
< p>多名儿童> 
< div id =modal> 
模式文本！ 
< / div> 
< / div> 
  

而CSS就是这样...

  .noprint {display：none;} 
。print {display：block;} 
  

您使用JavaScript来应用，例如：

 < div id =container class =noprint> 
< span> children< / span> 
< p>多名儿童> 
< div id =modalclass =print> 
模式文本！ 
< / div> 
< / div> 
  

在这些示例中， #modal 元素是在一个隐藏的容器里面。 CSS规范规定如果父元素被隐藏，所有子元素也将被隐藏，即使它们被设置为 display：block （或任何其他有效的<$ c $

如果你想隐藏页面上除模式窗口之外的所有内容，你应该怎么做？是让你的标记结构化为这样：

 < div id =modal> 
模态文本！ 
< / div> 
< div id =container> 
< span> children< / span> 
< p>多名儿童> 
< div id =modal> 
模式文本！ 
< / div> 
< / div> 
  

如果您无法控制模态元素的呈现方式，可以使用jQuery重新定位模态元素。请记住，这可能会影响您的模态窗口布局：

  //将元素移动到隐藏容器外面
 $（＃container）。before（$（＃modal））; 
  

I have seen some answers to this but I think I am actually having a CSS issue.

Here is a sample fragment of my HTML:

<id=container> children <id="modal">children</modal></container>

If I pop open the modal there is a print button. When I click it I use jQuery to apply a .noprint to #container and .print to #modal. But the .print to modal is disregarded, no matter what selector I apply I can't get the modal content to appear. What's worse, I cant use firebug, it is not showing me what print styles are being applied. I have tried #container #modal.print {display: block; } etc...

thanks!

解决方案

From the sound of it, your modal element is inside of the container. I'm guessing 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 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 these examples, the #modal element is inside of a hidden container. The CSS spec dictates that if a parent element is hidden, all children will be hidden also, even if they are set to display: block (or any other valid display value) or are absolutely positioned.

What you should do if you want to hide everything on the page except for your modal window is get your markup to be structured something like 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 modal element is rendered, you can use jQuery to re-position the modal element. Keep in mind that this may impact your modal window's layout:

// Moves the element outside of the hidden container
$("#container").before($("#modal"));

这篇关于打印模式窗口而不是页面的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！