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

Question

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

这是我的 HTML 的示例片段:

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

如果我弹出打开模式有一个打印按钮。当我单击它时，我使用 jQuery 将 .noprint 应用到 #container 并将 .print 应用到 #modal。但是模态的 .print 被忽略了，无论我应用什么选择器，我都无法让模态内容出现。更糟糕的是，我不能使用 Firebug ，它没有向我显示正在应用的打印样式。我努力了 #container #modal.print {显示: 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"));