打印模态窗口而不是页面的其余部分

Question

我已经看到了一些答案,但我认为我实际上有一个CSS问题.

这是我的HTML的示例片段:

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

如果我弹出模态,则有一个打印按钮.当我点击它,我使用jQuery应用.noprint到#container和.print到#modal.但是.printto modal被忽略了,不管我应用什么选择器我都无法得到模态内容.更糟糕的是,我不能使用firebug,它没有告诉我正在应用什么样的打印样式.我试过 #container #modal.print {display: block; }等...

谢谢!

Answer 1

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

<div id="container">
    <span>children</span>
    <p>more children>
    <div id="modal">
        Modal text!
    </div>
</div>

这样的CSS ......

.noprint { display: none;}
.print {display: block;}

您使用JavaScript来应用,如下所示:

<div id="container" class="noprint">
    <span>children</span>
    <p>more children>
    <div id="modal" class="print">
        Modal text!
    </div>
</div>

在这些示例中,#modal元素位于隐藏容器内.CSS规范规定如果父元素被隐藏,所有子元素也将被隐藏,即使它们被设置为display: block(或任何其他有效值display)或绝对定位.

如果你想隐藏页面上除了模态窗口之外的所有东西你应该怎么做才能让你的标记结构如下:

<div id="modal">
    Modal Text!
</div>
<div id="container">
    <span>children</span>
    <p>more children>
    <div id="modal">
        Modal text!
    </div>
</div>

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

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