`
mutongwu
  • 浏览: 450302 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一个简单的遮盖层

    博客分类:
  • DOM
 
阅读更多
.opacity{
filter:alpha(opacity=50);
-moz-opacity:0.5;  
opacity: 0.5; 
}

function Mask(){
	var fl = document.documentElement.style.overflow;
	document.documentElement.style.overflow = 'hidden';
	var el = document.createElement('div');
	el.id = 'maskDiv';
	el.className = 'opacity';
	el.style.cssText = 'position:absolute;background-color:#99CCFF;z-index:9999;top:0px;left:0px;'
	el.style.width = window.screen.availWidth + 'px';
	el.style.height = window.screen.availHeight + 'px';
	tip = document.createElement('div');
	tip.id = 'tipDiv'
	tip.innerHTML = '<div align="center" style="cursor:pointer;border:1px solid #000">单击关闭遮盖层</div>';
	tip.style.cssText = 'width:200px;height:200px;background-color:#fff;margin:100px auto';
	el.appendChild(tip)
	document.body.appendChild(el);
	tip.firstChild.onclick = function(){
		tip.firstChild.onclick = null;
		var el =document.getElementById('maskDiv');		
		document.body.removeChild(el);
		document.documentElement.style.overflow = fl;
	}
}
分享到:
评论

相关推荐

    Jquery做的遮盖层

    以下是一个简单的jQuery遮盖层实现步骤: 1. **HTML结构**:在HTML中添加一个用于遮盖层的`&lt;div&gt;`元素,通常设置为绝对定位并将其放置在所有内容之上。例如: ```html &lt;div id="overlay"&gt;&lt;/div&gt; ``` 2. **CSS...

    单击弹出遮盖层

    首先,遮盖层的实现往往基于HTML结构,一个简单的例子可能包括一个div元素,作为遮盖层的主要容器。这个div通常会设置为全屏大小,并通过CSS样式调整其透明度和位置。例如: ```html &lt;div id="overlay"&gt;&lt;/div&gt; ``` ...

    JavaScript弹出遮盖层

    一个简单的例子可能包括一个隐藏的div元素作为遮盖层,以及另一个div作为弹出框。 ```html ;"&gt; ;"&gt; 弹出内容 这里是弹出框的详细内容。 ``` 2. **CSS样式**:接着,为遮盖层和弹出框添加合适的CSS样式。遮盖层...

    javascrip实现t遮盖层

    一个简单的遮盖层HTML布局可能包括一个`&lt;div&gt;`元素作为遮盖层和一个登录窗口`&lt;div&gt;`: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JavaScript遮盖层实现 .overlay { position: fixed; top: 0; left: 0; width: ...

    基于vue开发的popup的mixins用于管理弹出框的遮盖层

    标题和描述中提到的"基于vue开发的popup的mixins用于管理弹出框的遮盖层",就是这样一个设计模式,旨在解决如何优雅地处理弹出框及其遮盖层的问题。 首先,我们来理解一下`mixins`在Vue.js中的作用。`mixins`是一种...

    动画ppt之遮盖效果

    它不仅仅是一个简单的幻灯片展示,更是一个多媒体信息的动态展示平台。动画效果的运用,无疑为PPT增添了活力,使其变得更加生动有趣。在众多动画效果中,“遮盖效果”以其独特的魅力和实用性,被广泛应用于各种演示...

    非常简单,代码非常少的遮罩层点击按钮弹出效果下载

    标题“非常简单,代码非常少的遮罩层点击按钮弹出效果下载”表明我们所讨论的是一个简洁、高效的解决方案,它能够快速地实现这一功能,而且代码量较少,适合初学者和有一定经验的开发者使用。这通常意味着它利用了...

    易语言图片遮盖涂抹

    4. 涂抹效果:如果需要涂抹效果,可以创建一个模糊或者半透明的覆盖层,然后用GDI的绘图命令将其与原图混合。 5. 显示或保存结果:最后,你可以将处理后的图像显示在界面上,或者保存为新的图片文件。 在压缩包中的...

    android得到灰色半透明遮盖效果

    根据题目中的代码片段,我们可以看到一个简单的实现方式: ```java public void drawAhade(Canvas canvas) { Paint shadePaint = new Paint(); // 设置颜色为灰色,透明度为170(半透明) shadePaint.setARGB...

    实用div实现的弹出层

    2. **CSS 遮盖层**:遮盖层通常是一个全屏的半透明背景,用于遮挡页面上的其他元素,使用户注意力集中于弹出层。通过设置CSS的`position`属性为`fixed`或`absolute`,使其相对于窗口或父元素定位,配合`z-index`来...

    页面技术---js拖拽和DIV的层控制

    以下是一个简单的拖拽实现: ```javascript function makeDraggable(element) { let startX, startY; element.addEventListener('mousedown', function(event) { startX = event.clientX - element.offsetLeft...

    jquery弹出层不关闭 父页面刷新

    对于弹出层,通常是一个具有`position: fixed`属性的div元素,它会在页面上浮动,遮盖住其他内容。 要实现“弹出层不关闭,父页面刷新”的功能,我们需要监听用户的刷新事件。在JavaScript中,可以使用`window....

    一版很 Fancy 的滑动 Cell 遮盖效果.zip

    开发者可以通过设置不同的参数来调整滑动Cell的遮盖效果,例如遮盖层的颜色、透明度、速度等。此外,还可以自定义每个Cell的动画效果,如缩放、旋转等,以增强视觉冲击力。 4. **处理事件**:VegaScroll还支持监听...

    LAI-2200C 冠层分析仪简易操作手册.pdf

    LAI-2200C冠层分析仪是一款用于测量叶面积指数(Leaf Area Index, LAI)的科学仪器。叶面积指数是指单位地面面积上叶片表面积的总和,是描述植被覆盖度的重要参数。LAI-2200C广泛应用于农业、生态学和植物生理学研究...

    js打开关闭遮罩层

    以下是一个简单的示例: ```javascript function openMask() { var mask = document.getElementById('mask'); mask.style.display = 'block'; } ``` 2. 关闭遮罩层: 同样地,我们可以编写一个函数来关闭遮罩层...

    jQuery+HTML5手机移动端遮罩弹出菜单代码

    jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、事件处理、动画效果和Ajax交互。在这个案例中,jQuery被用来控制弹出菜单的显示和隐藏,以及处理用户与菜单的交互。通过简单的jQuery选择器和方法,我们...

    简单容易的jquery遮罩层

    首先,jQuery遮罩层的核心在于创建一个具有适当样式的div元素,这个元素通常设置为全屏大小并具有一定的透明度,以达到遮盖网页其他内容的效果。通过CSS样式,我们可以控制遮罩层的颜色、透明度、位置等属性。例如:...

    bootstrap遮罩效果

    然后,我们需要添加一个div来展示加载动画或者简单的提示信息。这里可以使用Bootstrap的`.spinner-border`类来创建一个旋转的加载图标: ```html 加载中... ``` 现在,我们可以编写JavaScript代码来控制...

    H5 页面整体变灰色的的代码

    以下是一个简单的HTML结构,我们将在此基础上添加变灰效果: ```html &lt;!DOCTYPE html&gt; , initial-scale=1.0"&gt; .gray-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; ...

    弹出遮罩层,纯JS效果,可自定义背景

    一个简单的遮罩层通常由一个全屏的透明或半透明div组成,我们可以将这个div命名为"mask"。例如: ```html &lt;!DOCTYPE html&gt; 纯JS遮罩层 .mask { position: fixed; top: 0; left: 0; width: 100%; ...

Global site tag (gtag.js) - Google Analytics