将 jQueryUI 对话框中的 重新定位到 CSS 打印的中心位置

【问题标题】：repositioning a from a jQueryUI dialog to centerstage for CSS Print将 jQueryUI 对话框中的 重新定位到 CSS 打印的中心位置
【发布时间】：2011-06-08 22:18:56
【问题描述】：

我正在使用 jQueryUI 对话框命令弹出  并希望使用 media="print" 声明式仅打印  的文本

html代码::

<div class="jPajxDialog">
  <p class="print">
    Some Text
  </p>
<div>

我尝试过： CSS 代码::

@charset "UTF-8";

body {visibility:hidden;}
.print {visibility:visible;}
.noprint {visibility: hidden;}

p.print {
  position: absolute;
  margin: 15px auto;
}

【问题讨论】：

您希望“某些文本”仅在印刷媒体上可见（而不是在屏幕上），还是希望“某些文本”始终可见并摆脱父级<div class="jPajxDialog">打印时？
始终可见，并摆脱父级并在打印时绝对位于页面的顶部中心

标签： javascript jquery css jquery-ui

【解决方案1】：

要在打印时隐藏某些内容，您应该在 css 中使用“display: none”。请记住，如果您让父级“显示：无”，即使您执行了“显示：阻止”，他的所有子级也不会显示。在孩子身上。

您可能想要查看您的 html 结构，以便您想要隐藏的信息不会成为您想要保留的信息的父级，也就是说，如果您想要一个跨浏览器兼容的解决方案。

例如，

<div>
  <div class="noprint"> Site header </div>
  <div>
    <div class="noprint"> Site menu </div>
    <div class="print"> the content you wish to print </div>
    <div class="noprint"> Site footer </div>
  </div>
</div>

和 css media="print"

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

【讨论】：

此外，“可见性：隐藏”是不好的，因为内容仍将使用与可见相同的空间（宽度/高度），因此是“显示：无”。最后，您所做的无法正常工作，因为您在正文上设置了“可见性：隐藏”，这是您页面中所有其他标签的父级，并且隐藏了您页面上的所有内容。