`

PDF将弹出窗口遮挡的问题(<div> layer on top of PDF)

 
阅读更多

      之前也做过在线显示PDF的任务,这次的比较棘手:PDF的组件将弹出窗口挡住了。

      想过好几种解决办法,最后终于找到一个比较好的解决办法:

      下面重新理一理这两天尝试过的一些方法:

      (1)改变PDF的样式,就是使用z-index来控制。

        这无疑是首先想到的方法。无奈从网上搜了很久,也不知道用来显示PDF的<object>标签是个什么样式。在它外面设置一个比dialog小的z-index也不对。于是此方法告吹。

       (2)http://stackoverflow.com/questions/593176/div-layer-on-top-of-pdf 给了我一个解决方法,于是这个bug开始有点眉目。

          从网上看到这么一段话:在IE5.5版本中,IFrame就开始作为一个Windowless元素使用了,使用z-index就可以将DIV覆盖IFrame,但是如果IFrame中有Windowed对象,如ActiveX控件时,IFrame就变成一个Windowed元素,DIV就只能在IFrame后边混了。应该是解释为什么同样是iframe,PDF还是会把div遮挡住,stackFlow里面给出了一个解决方法。

          但此方法在我这里暂时行不通。行不通的症结在于:弹出的dialog始终位于窗口正中央,如何定义一个iframe,和他同样大小 且 也位于正中央,这是个问题。并且,如何对各个分辨率的电脑都适用也是个问题。

       (3)借用第三个的原理,但是可以不设置position:absolute 和 z-index。这个方法就是:如果有一个dialog弹出,就定义一个空白的dialog用iframe包住先于他弹出,借用他来遮盖住底下的PDF。

         事实证明这个方法是可行的。把空白的iframe定义成dialog的好处在于:不用操心这个遮挡层的弹出位置在哪里,而且容易操作。

 

         这个bug出现最初,我是先把pdf部分隐藏掉,需要的时候再显示出来。但这个必然用户是不接受的。后来也曾想过,既然这pdf的样式改不了,那么当dialog出现的时候,将pdf部分变成图片,静态显示在下面可不可以。但是这个方法需要导入一些jar包,对整体影响比较大,于是也没有实行这个计划。

 

        解决了这个bug,又重新认识了 iframe, 学问还是很大的。

 

分享到:
评论

相关推荐

    网页Object标签遮盖DIV标签解决方法

    在网页开发过程中,我们经常会遇到各种布局问题,其中之一就是`&lt;Object&gt;`标签遮盖`&lt;div&gt;`标签的情况。`&lt;Object&gt;`标签在HTML中用于嵌入外部资源,如Flash、PDF或其他插件,而`&lt;div&gt;`标签则常用于创建页面上的容器或...

    DIV遮挡问题

    这个问题通常发生在多个&lt;div&gt;元素重叠时,一个&lt;div&gt;可能会遮挡住另一个&lt;div&gt;,导致部分内容不可见。解决这个问题需要对HTML结构、CSS选择器、定位方式以及Z轴顺序有深入理解。 首先,&lt;div&gt;是HTML中的一种常用容器...

    JAVASCRIPT弹出DIV层窗口实例

    &lt;title&gt;JavaScript弹出DIV层窗口实例&lt;/title&gt; &lt;style&gt; #popup { display: none; position: absolute; /* 或者 fixed,取决于弹窗是否随滚动条移动 */ width: 400px; height: 300px; background-color: white...

    泽元div 弹出层,弹出框

    在实现弹出层时,我们通常会创建一个隐藏的`&lt;div&gt;`,然后通过JavaScript将其显示在页面上。这个`&lt;div&gt;`可以包含任何内容,比如文本、图片、表单等。CSS则用于定义弹出层的样式,包括位置、大小、背景色、边框等。 *...

    解决DIV在IE下被下拉列表select穿透的问题(二)

    在大多数现代浏览器中,这两者能够正常地进行层叠和遮挡控制,但在IE中,由于其对CSS渲染机制的实现不同,可能导致`&lt;select&gt;`元素无视`z-index`属性,出现在`&lt;div&gt;`之上。 为了解决这个问题,开发者们采取了一些...

    自定义弹出窗口

    例如,我们可以使用`&lt;div&gt;`元素作为弹出窗口的容器,`&lt;input&gt;`元素用于文本输入,以及其他HTML元素如`&lt;button&gt;`等。 2. CSS 样式:为了使弹出窗口看起来独特且符合设计要求,我们需要用CSS来定制其外观。这包括设置...

    HTML表格固定第一行第一列效果

    为了实现固定第一列,我们需要创建一个新的`&lt;div&gt;`,并将其设置为绝对定位,宽度等于第一列的宽度,放置在表格左侧。这样,当表格滚动时,这个`&lt;div&gt;`会始终保持在原位。同时,我们需要调整`&lt;thead&gt;`中的`&lt;th&gt;`的...

    DIV移动并排序JS效果

    3. 移动效果:在JavaScript中,我们可以利用CSS属性(如`left`、`top`)和JavaScript事件(如`onmouseover`、`onclick`)来改变`&lt;div&gt;`元素的位置,从而实现移动效果。 4. 排序效果:排序通常涉及到数组操作,...

    实用div实现的弹出层

    3. **弹出层菜单**:弹出层通常是包含特定内容的`&lt;div&gt;`,比如文本、表单、图片等。使用CSS,我们可以定义弹出层的位置(如相对于鼠标位置、页面某个元素等),大小,以及边框、阴影等视觉效果,以提升用户体验。 4...

    HTML_DIV拼图_JS脚本模块实例

    每个&lt;div&gt;代表拼图的一个部分,通过设置其CSS样式来控制其外观和位置。通常,这些&lt;div&gt;会被设置为绝对定位,以便它们可以独立于其他元素移动。 CSS(层叠样式表)用于定义HTML元素的样式,包括颜色、大小、布局等。...

    解决IE6 中select 穿透 div 等层的问题

    这个IFrame可以解决IE6中的z-index问题,使元素能够正确地遮挡住`&lt;select&gt;`。使用bgiframe时,需要引入jQuery库和bgiframe插件,并调用相应的方法将插件应用到目标元素上。 2. 创建透明IFrame:不依赖jQuery的情况...

    最顶层div被flash或者下拉列表遮挡的问题解决

    ### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中,有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的,尤其是`z-index`值的设置不...

    网页悬浮在线人工客服代码.zip

    这可能涉及到`&lt;div&gt;`标签,用于创建容器,以及`&lt;a&gt;`或`&lt;button&gt;`标签,用于触发客服对话框的打开和关闭。 2. **CSS样式**: - `static` 文件夹通常包含网站的静态资源,如CSS样式表。在这个场景下,我们可以推测这...

    ie6 select无法被div遮盖的bug解决方法

    在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个著名的布局bug,这个问题主要涉及到`&lt;select&gt;`元素与`&lt;div&gt;`元素的层叠上下文(Z-index)处理。当一个`&lt;div&gt;`元素试图遮盖页面中的下拉列表框`&lt;select&gt;`时...

    ONVIF视频遮挡和移动侦测参数获取与配置方案.docx

    &lt;ActiveCells&gt;...&lt;/ActiveCells&gt; &lt;!-- Base64编码 --&gt; &lt;/Configuration&gt; &lt;/Rule&gt; &lt;/ModifyRules&gt; ``` #### 五、视频遮挡参数获取与配置 ##### 5.1 获取视频遮挡参数 与移动侦测类似,获取视频遮挡参数的步骤...

    css 边框上如何写入文字?

    &lt;div class="text-on-border"&gt;标题&lt;/div&gt; &lt;p&gt;这是一个示例段落,用于演示如何在边框上写入文字。&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; ``` **关键分析**: - 通过`.border-box`类设置了一个蓝色边框的盒子。 - `.text-on...

    My97 DatePicker日期控件 4.0 正式版(5月30日)

    我是控件的作者,请下载此版本&lt;br&gt;&lt;br&gt;一个非常好用的web日期控件,功能非常优秀,绝对是你一直想要的日期控件.&lt;br&gt;&lt;br&gt;更人性化,更全面的功能 &lt;br&gt;大部分日期控件都具备功能如:带时间显示,支持周显示,自定义格式,自动...

    固定表格的表头,使表体自动生成滚动条

    同时,为了防止表头遮挡表体,需要给`&lt;tbody&gt;`添加适当的内边距(padding-top)。 ```css thead { position: fixed; top: 0; width: 100%; } tbody { padding-top: /* 表头高度 */; } ``` 2. **自动...

    淘宝旺铺4屏遮掩效果代码

    - 每个 `&lt;td&gt;` 的 `style` 属性中的 `opacity` 和 `background-color` 用于设置遮罩层的透明度和背景颜色,使得遮罩层覆盖在图片上方时不会完全遮挡图片内容。 ##### 3. CSS样式美化 为了使页面更加美观,还需要...

Global site tag (gtag.js) - Google Analytics