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

【问题标题】：print a modal window not the rest of the page打印模态窗口而不是页面的其余部分
【发布时间】：2014-08-11 23:45:56
【问题描述】：

我已经看到了一些答案，但我认为我实际上遇到了 CSS 问题。

这是我的 HTML 的示例片段：

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

如果我打开模式，就会有一个打印按钮。当我单击它时，我使用 jQuery 将 .noprint 应用到 #container 和 .print 到 #modal。但是模态的.print 被忽略，无论我应用什么选择器，我都无法显示模态内容。更糟糕的是，我不能使用萤火虫，它没有告诉我正在应用什么打印样式。我努力了 #container #modal.print {display: block; }等等...

谢谢！

【问题讨论】：

您的#modal 窗口是否在#container div 中？从您最后一行代码的外观来看，它表明情况确实如此。你能发布你的打印 CSS 文件和相关的 HTML 吗？

标签： javascript jquery css

【解决方案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"));

【讨论】：

最后一件事，移动盒子成功了！非常好的“跳出框框思考”大声笑谢谢！

【解决方案2】：

还有另一种打印模式窗口内容的方法。将此功能添加到模态窗口

Print contents of ModalPanel

我已经尝试过了，它有效。您只需要使用样式表。

【讨论】：