`

使用DIV遮挡IFrame 等其它页面元素

HTMLMicrosoftF# 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>遮挡IFrame</title>
<script>
function disableIframe()
{
dv = document.getElementById("blockUI");
df = document.body;  //document.getElementById("iframe_id");可以是任何一个要遮挡的ID
dv.style.width=df.offsetWidth + "px"
dv.style.height=df.offsetHeight + "px"
dv.style.display = "block"
}

function showIframe()
{
dv.style.display = "none"
}
</script>
</head>
<body scroll=no class="tablebody" id="body">

<div id="blockUI" style="display: none; background-color: black; width: 100%; height: 1000px; position: absolute; left: 0px; top: 0px; z-index: 50000; -moz-opacity: 0.5; opacity: 0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);" onclick="return false" onmousedown="return false" onmousemove="return false" onmouseup="return false" ondblclick="return false">
&nbsp;
</div>
<iframe id="f" style='z-index:10' src='http://dotnet.aspx.cc'></iframe>
<input type="button" onclick="disableIframe()" value="ceshi" />

<input type="button" onclick="showIframe()" value="show" />

</body>
</html>

分享到：
| Java 中通过方法名动态调用方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div覆盖 iframe

    在描述中提到的“前辈的成果，显示所需要的页面，第一个页面隐藏”，可能指的是使用`div`作为初始页面，然后通过某种用户交互（如点击按钮）来显示`iframe`内容，同时`div`作为背景或者遮罩层，使得`iframe`内容成为...

    div被iframe遮住的几种情况及解决方法

    在前端开发过程中，DIV元素被IFRAME遮挡是一个常见的问题，尤其是当页面布局复杂或存在多层嵌套的元素时。以下将详细阐述几种DIV被IFRAME遮挡的情况，并提供相应的解决方法。 首先，要了解的是IFRAME是一种HTML元素...

    多个iframe，显示其中一个frame中的div，并处于最上层显示

    在网页设计和开发中，有时候我们需要处理多个`iframe`（内联框架）并实现特定的交互效果，例如只显示其中一个`iframe`中的`div`元素，并确保它在所有其他元素之上，即处于最上层显示。这样的需求通常出现在需要创建...

    解决div总是被select遮挡的问题.rar

    在网页设计中，有时会遇到一个常见的问题，即`div`元素被`select`下拉框遮挡。这个问题主要源于浏览器的默认样式和渲染机制。`select`元素通常具有较高的Z轴顺序（z-index），因此它会覆盖其他层叠元素，如`div`。在...

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

    `&lt;Object&gt;`标签在HTML中用于嵌入外部资源，如Flash、PDF或其他插件，而`&lt;div&gt;`标签则常用于创建页面上的容器或布局元素。当这两个标签在同一页面上相遇时，如果没有正确处理，`&lt;Object&gt;`标签可能会覆盖`&lt;div&gt;`标签的...

    ie6下select遮挡div

    标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题：当在网页上使用select下拉框时，它会覆盖在其他使用绝对或相对定位的元素（如div）之上，导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...

    IE6 select z-index无效，遮挡div bug的解决方法

    今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。 解决方法之一：Iframe包裹select元素 使用iframe包住select，这样iframe有z-index，只要在div上设置的z-...

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

    IFrame的CSS属性如`position`, `z-index`, `width`, `height`等需要根据实际需求进行调整，以确保它能够正确地遮挡住`&lt;select&gt;`。 以下是创建透明IFrame的示例代码： ```html .cover-iframe { position: ...

    div层跨越iframe帧显示在上面的解决方法附代码

    然而，当一个 `div` 层位于一个 `iframe` 之上时，可能会出现 `div` 跨越 `iframe` 显示的问题，导致某些内容被遮挡。本文将详细介绍如何解决这一问题，并提供相关代码示例。 首先，理解 `z-index` 属性是解决这个...

    解决IE6中 Div层挡不住Select组件

    1. **使用iframe**：将需要覆盖`select`的`div`内容放入一个`iframe`中，由于`iframe`在IE6中拥有独立的堆叠上下文，可以有效遮挡`select`。 2. **模拟Select**：使用JavaScript或jQuery库（如`select2`或`...

    div总是被select遮挡的解决方法

    在Web开发过程中，确保页面元素的显示不会被其他元素所遮挡是一个常见的问题。特别是当页面上有一个下拉选择框（select）和一个可拖拽或者动态改变大小和位置的div元素时，可能会出现div被select遮挡的情况。这种...

    Div Select挡住的解决办法

    此外，尽管这种方法解决了`Div`和`Select`的遮挡问题，但它引入了额外的`Iframe`元素，可能会影响页面性能和SEO。因此，在设计时还应考虑优化方案，例如调整布局、使用JavaScript或者现代CSS技术（如Flexbox或Grid）...

    option挡住div解决方法

    需要注意的是，这个方法可以解决div元素被select元素挡住的问题，但是它也可能会带来一些其他问题，例如， iframe元素可能会影响页面的结构和互动性。因此，在使用这个方法时需要小心谨慎，并且需要根据实际情况进行...

    layui layer select 选择被遮挡的解决方法

    然而，在实际应用中，当layer弹窗内的select组件展开时，有时会出现被其他元素遮挡的问题，这会严重影响用户体验。为了解决这一问题，我们可以采取以下策略。 首先，我们要理解导致select被遮挡的原因。通常，layer...

    div等浮层在IE6下被下拉框遮挡的解决方法

    在IE6浏览器中，一个常见的问题是在页面上使用div创建的浮动层（通常用于弹出窗口或下拉菜单）会被网页中的下拉列表（DropDownList）遮挡。这是因为IE6处理下拉列表的方式不同，它将DropDownList视为系统级别的控件...

    JS打开关闭移动层动画实例

    - 如果不存在合适的`iframe`，则创建一个新的`iframe`，设置其位置、大小等属性，并将其添加到目标div元素的父节点中。 ##### 3. 获取最大宽度和高度 - 通过`getAttribute`和自定义`getStyle`函数获取div的最大宽度...

    DIV遮罩层如何实现

    DIV遮罩层是一种在网页上添加的半透明覆盖层，用于实现对页面其他内容的遮挡，常用于弹出层、加载提示或页面临时锁定等场景。实现DIV遮罩层的关键知识点主要包括以下几点： 1. HTML结构：创建一个用于遮罩的DIV元素...

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: ...

Magicbox
Global site tag (gtag.js) - Google Analytics