之前也做过在线显示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, 学问还是很大的。
相关推荐
这是因为IE将 `<object>` 视为一种“窗口化”元素,这意味着这些元素总是会被渲染在非窗口化元素之上,从而导致遮罩问题。 针对这一问题,有一种常用的解决方案是使用 `<iframe>` 作为中间层来解决覆盖问题。具体...
这个问题通常发生在多个<div>元素重叠时,一个<div>可能会遮挡住另一个<div>,导致部分内容不可见。解决这个问题需要对HTML结构、CSS选择器、定位方式以及Z轴顺序有深入理解。 首先,<div>是HTML中的一种常用容器...
在网页开发过程中,我们经常会遇到各种布局问题,其中之一就是`<Object>`标签遮盖`<div>`标签的情况。`<Object>`标签在HTML中用于嵌入外部资源,如Flash、PDF或其他插件,而`<div>`标签则常用于创建页面上的容器或...
<title>JavaScript弹出DIV层窗口实例</title> <style> #popup { display: none; position: absolute; /* 或者 fixed,取决于弹窗是否随滚动条移动 */ width: 400px; height: 300px; background-color: white...
在实现弹出层时,我们通常会创建一个隐藏的`<div>`,然后通过JavaScript将其显示在页面上。这个`<div>`可以包含任何内容,比如文本、图片、表单等。CSS则用于定义弹出层的样式,包括位置、大小、背景色、边框等。 *...
在大多数现代浏览器中,这两者能够正常地进行层叠和遮挡控制,但在IE中,由于其对CSS渲染机制的实现不同,可能导致`<select>`元素无视`z-index`属性,出现在`<div>`之上。 为了解决这个问题,开发者们采取了一些...
例如,我们可以使用`<div>`元素作为弹出窗口的容器,`<input>`元素用于文本输入,以及其他HTML元素如`<button>`等。 2. CSS 样式:为了使弹出窗口看起来独特且符合设计要求,我们需要用CSS来定制其外观。这包括设置...
<div class="floating-div">悬浮的div</div> <canvas id="myCanvas"></canvas> ``` 3. **JavaScript交互**: 如果需要在canvas上进行动态交互,比如点击canvas时检测是否与div重叠,或者让div跟随鼠标移动,...
为了实现固定第一列,我们需要创建一个新的`<div>`,并将其设置为绝对定位,宽度等于第一列的宽度,放置在表格左侧。这样,当表格滚动时,这个`<div>`会始终保持在原位。同时,我们需要调整`<thead>`中的`<th>`的...
3. 移动效果:在JavaScript中,我们可以利用CSS属性(如`left`、`top`)和JavaScript事件(如`onmouseover`、`onclick`)来改变`<div>`元素的位置,从而实现移动效果。 4. 排序效果:排序通常涉及到数组操作,...
3. **弹出层菜单**:弹出层通常是包含特定内容的`<div>`,比如文本、表单、图片等。使用CSS,我们可以定义弹出层的位置(如相对于鼠标位置、页面某个元素等),大小,以及边框、阴影等视觉效果,以提升用户体验。 4...
每个<div>代表拼图的一个部分,通过设置其CSS样式来控制其外观和位置。通常,这些<div>会被设置为绝对定位,以便它们可以独立于其他元素移动。 CSS(层叠样式表)用于定义HTML元素的样式,包括颜色、大小、布局等。...
这个IFrame可以解决IE6中的z-index问题,使元素能够正确地遮挡住`<select>`。使用bgiframe时,需要引入jQuery库和bgiframe插件,并调用相应的方法将插件应用到目标元素上。 2. 创建透明IFrame:不依赖jQuery的情况...
### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中,有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的,尤其是`z-index`值的设置不...
这可能涉及到`<div>`标签,用于创建容器,以及`<a>`或`<button>`标签,用于触发客服对话框的打开和关闭。 2. **CSS样式**: - `static` 文件夹通常包含网站的静态资源,如CSS样式表。在这个场景下,我们可以推测这...
<ActiveCells>...</ActiveCells> <!-- Base64编码 --> </Configuration> </Rule> </ModifyRules> ``` #### 五、视频遮挡参数获取与配置 ##### 5.1 获取视频遮挡参数 与移动侦测类似,获取视频遮挡参数的步骤...
<div class="text-on-border">标题</div> <p>这是一个示例段落,用于演示如何在边框上写入文字。</p> </div> </body> </html> ``` **关键分析**: - 通过`.border-box`类设置了一个蓝色边框的盒子。 - `.text-on...
我是控件的作者,请下载此版本<br><br>一个非常好用的web日期控件,功能非常优秀,绝对是你一直想要的日期控件.<br><br>更人性化,更全面的功能 <br>大部分日期控件都具备功能如:带时间显示,支持周显示,自定义格式,自动...
在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个著名的布局bug,这个问题主要涉及到`<select>`元素与`<div>`元素的层叠上下文(Z-index)处理。当一个`<div>`元素试图遮盖页面中的下拉列表框`<select>`时...