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

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

这是我的HTML的示例片段:

 children children 

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

谢谢!

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

 
children

more children>

这样的CSS ……

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

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

 
children

more children>

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

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

  
children

more children>

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

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

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

打印ModalPanel的内容

我试过这个并且它有效。 你只需要使用样式表。