设置遮罩层

/***设置遮罩层***/
.dv{position: fixed;top: 0;left:0;right: 0;bottom: 0;}

时间： 2025-01-01 12:37:42

设置遮罩层的相关文章

点击按钮弹出视频并有遮罩层效果

涉及到css以及JavaScript. 最终显示效果:点击红色按钮,会有视屏弹出并带有遮罩层点击黄色区域可以关闭视频并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="video"></a> </div> 以下代码就

遮罩层的实现 .mask{ position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,.3); z-index:1000; display:none; } 解释:如果想在某个区域设置遮罩层,就把.mask放在某个区域的div下:根据自己的需求设置宽高,定位也要适当删减修改: 层级就根据自己需求设置大小: 本人遇到的情况是数据不固定,遮罩层大小不固定: 数据多的情况下遮罩层正常遮罩,如果没数据或

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览源码下载使用方法使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

登陆框跳出的遮罩层效果实现

通过元素节点的创建.删除等操作实现的弹出框遮罩层效果 <style> #oMask{ opacity: 0.7; filter:alpha(opacity=70); position: absolute; z-index: 15; background: #000; left: 0; top: 0; } #oLogin{ position: absolute; width: 400px; height: 200px; border:3px solid red; z-index: 26; bac

纯js制作遮罩层对话框 -- g皓皓

//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> func

在弹窗中新建一个遮罩层

一.mask-div 在原来页面弹出一个弹窗后,鼠标还是可以点击页面其他地方,所以我要给页面弹出一个遮罩层,把页面所有东西都遮住,不给用户点击除了弹窗之外的东西. 实现后的效果: 当我点击“添加”按钮时,会弹出两个层,一个是下面的遮罩层(一个我们看到的黑色半透明的遮住全屏幕的div),另一个就是我们要填写信息的弹窗. 二.设置遮罩层样式要实现遮住全屏,可以这样来设置属性,兼容FF.chrome #mask-div{background-color:black; position:fixed;

在jQuery环境下制作轻巧遮罩层

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作. 制作原理很简单:1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景(重点是捕获内容div的大小位置)4设置点击触发按钮遮罩层背景内容同时显示或隐藏. 具体代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

遮罩层实现方式二

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #login-register span{ display: inline-block; padding: 6px 10px; background: #E3E3E3; cursor: pointer

Html遮罩层的显示(主要在于样式设置)

<html> <head> <title></title> <style type="text/css"> #divshow { position: fixed; /*相对于浏览器窗口进行定位*/ left: 0px; top: 0px; width: 100%; height: 100%; opacity:0.6; /* 透明度*/ background:red; display:none; position:absolut