`

在iframe 中页面中设置遮罩遮罩层

阅读更多

 

1.创建遮罩层(遮住左边的菜单和上面的菜单)

function CreatNodeAll()
 {
 var NewMask=window.parent.document.createElement("div");
 NewMask.id="Mask";
 NewMask.style.position="absolute";
 NewMask.style.top="0";
 NewMask.style.left="0";
 NewMask.style.zIndex="1";
 NewMask.style.backgroundColor="#000000";
 NewMask.style.filter="alpha(opacity=30)";
 //NewMask.style.opacity="0.7";
 NewMask.style.width="201";
 NewMask.style.height=(window.parent.document.body.scrollHeight+50)+"px";
 
 
 var TopMask=window.parent.document.createElement("div");
 TopMask.id="TopMask";
 TopMask.style.position="absolute";
 TopMask.style.top="0";
 TopMask.style.left="201";
 TopMask.style.zIndex="1";
 TopMask.style.backgroundColor="#000000";
 TopMask.style.filter="alpha(opacity=30)";
 //TopMask.style.opacity="0.7";
 TopMask.style.width="100%";
 TopMask.style.height="20%";
 window.parent.document.body.appendChild(TopMask);
 
 window.parent.document.body.appendChild(NewMask);
 }
 
//移除遮罩层
function CancelAll()
{
window.parent.document.body.removeChild(window.parent.document.getElementById("TopMask"));
window.parent.document.body.removeChild(window.parent.document.getElementById("Mask"));
}

 

 

 

 

分享到:
评论

相关推荐

    iframe弹出框遮罩父类页面

    在网页开发中,有时我们需要实现一个功能,即在iframe中打开一个新的弹出窗口,并且这个弹出窗口能够遮罩住其父级页面,提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...

    用iframe做的遮罩层

    在网页设计中,遮罩层是一种常见的用户界面元素,它用于在页面上创建一个半透明或全黑的覆盖层,通常用于突出显示特定内容或执行某些操作时避免用户与背景交互。"用iframe做的遮罩层"是一个巧妙的实现方式,它利用了...

    基于Jquery的iframe遮罩层插件,可以遮挡flash。此插件在“爱乐网址收藏夹”中使用

    标题中的“基于Jquery的iframe遮罩层插件”指的是一个使用jQuery库开发的JavaScript插件,它的主要功能是在网页中创建一个iframe遮罩层。这个遮罩层能够覆盖整个页面,包括页面上的Flash元素,从而达到特定的交互...

    JavaScript弹出遮罩层

    在这个场景中,我们看到一个经过修改的遮罩层实现,它可以通过链接触发,并指定弹出的内容页面。 首先,`showdiv.htm`很可能是遮罩层显示的主体部分,它可能包含HTML结构,如一个全屏的div,具有透明度设置,以及...

    div+css代替iframe框架并带全屏遮罩加载特效

    在网页设计和开发中,传统的`iframe`框架常被用于嵌入外部页面或者实现多页面同屏显示。然而,随着Web技术的发展,`div+css`布局方式因其灵活性和高效性逐渐成为主流,许多开发者开始寻找用`div+css`替代`iframe`的...

    jquery 遮罩层 插件

    非常好用的一款jquery遮罩层插件,网页制作必备。

    jQuery遮罩层在线QQ客服代码

    1. **创建遮罩层**:在HTML中,我们首先需要创建一个用于遮罩层的div元素,设置其CSS样式以全屏显示并具有适当的透明度。例如: ```html <div id="mask"></div> ``` 接下来,我们在CSS中定义样式: ```css #mask { ...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    在网页设计中,浮动 Div 是指能够独立于页面其他元素自由移动的 Div 容器。通过 CSS 和 JavaScript 的结合使用,可以使 Div 元素在页面上自由移动,这种效果常用于弹出窗口、浮动广告等场景。 #### 实现方法 1. **...

    jQuery遮罩层在线QQ客服代码.zip

    1. **jQuery遮罩层**:遮罩层是一种在网页上覆盖一层半透明或不透明的背景,用于突出显示某个特定区域或元素。在客服功能中,遮罩层可以创建一个专注的环境,使用户能集中注意力在与客服的交流上。实现遮罩层通常...

    HTML实现遮罩层的方法 HTML中如何使用遮罩层

    此外,示例中还包含了一个`iframe`,用于在子页面中调用显示和隐藏遮罩层的功能。这可以通过在`iframe`的`onload`事件中调用父页面的JavaScript函数实现,如`parent.showLoading()`和`parent.hideLoading()`。 总结...

    带遮罩层弹出框展示图片插件

    【标题】"带遮罩层弹出框展示图片插件"是用于网页中实现一种交互式的图片查看功能,它在用户点击某个元素后,会在页面上弹出一个带有半透明遮罩层的图片框,允许用户在一个独立的视图中浏览图片。这种设计常见于相册...

    colorbox弹出层,遮罩,对话框

    它不仅提供了基本的弹出功能,还包含了遮罩层(mask)效果,使得用户在查看弹出内容时,可以集中注意力,同时不影响对背景页面的感知。 二、功能特性 1. **多类型支持**:Colorbox支持展示单张或一组图片,纯HTML...

    js 弹出窗口 弹出div window 支持遮罩、拖动、嵌入页面、换肤等实用功能

    1. **遮罩效果**:遮罩层是在弹出窗口后面添加一个半透明的背景层,以突出显示弹出窗口并防止用户与页面其他部分互动。实现这一效果通常涉及到CSS的透明度和定位属性,以及JavaScript来动态调整遮罩层的大小和显示。...

    layui: layer.open加载窗体时出现遮罩层的解决方法

    在 `layer.open` 的配置对象中,`shade` 参数用于设置遮罩层的透明度,其值为0到1之间的小数。如果希望完全去除遮罩层,可以将 `shade` 设置为 `0`。例如: ```javascript layer.open({ shade: 0, // 其他配置....

    父页面显示遮罩层弹出半透明状态的dialog

    在网页设计中,创建一个父页面显示遮罩层并弹出半透明状态的dialog是常见的交互效果,这种设计可以提供用户友好的体验,使他们能够专注于当前操作而不会被其他页面元素分心。Dialog(对话框)通常用来展示重要的信息...

    DIV遮罩层如何实现

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

    html添加水印遮罩层.html

    它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的...HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等, 通过Html技术给内容上添加一层水印遮罩

    多种JS遮罩层特效欢迎下载

    在网页设计中,遮罩层特效是一种常见的交互元素,它可以在用户与页面交互时创建出吸引人的视觉效果。本资源包含四种JS遮罩层库:GreyBox v5.53、Lightbox Gone Wild、litebox-2.4,这些工具可以帮助开发者轻松实现...

    jquery js css弹出居中的遮罩层

    对于IE6、7这些不支持position:fixed的浏览器,可能需要采用iframe作为遮罩层,并通过JavaScript计算和设置iframe的高度和宽度以覆盖整个页面。 接着,jQuery+CSS的实现通常更为简洁。jQuery是一个强大的JavaScript...

Global site tag (gtag.js) - Google Analytics