利用Div+Css实现屏蔽效果
2019-08-14 09:39:05来源:爱站网 阅读 ()
我们在做项目的过程中有时候需要将table事件屏蔽,但是也有不少小伙伴们不知道如何利用Div+Css实现屏蔽效果,那么现在就让爱站小编为大家详细介绍一下吧。
【效果图】
?
总而言之,就是当某一事件被触发时,例如 按钮点击事件 。使一个事先定义好的div 显示, 并用Css控制位置,其中的z-index属性必须有,
值赋的越大,说明此div层在重叠时,在最上面。
其中要注意的地方:
【遮罩层的大小】
1、用JS判断你的显示器分辨率,获取长与宽两个参数,将这两个参数赋给第二层的Div,作为他的长与宽的像素值,这样的话,无论在多大或多小的显示器上,都可以显示同样的效果
2、CSS样式表:这种方法,只能提前设置好遮罩层的长与宽了,但是就会出现一些问题:如果你的遮罩层设置的宽度、长度很大,那么在小显示器上就会出现浏览器的滚动条~~反之则会出现遮罩不上的问题
因为做HTML模型,所以我用的第二种方法,有个不太合理解决的方式:我把浏览器的下方(横向的)滚动条给禁用掉了。代码是: 在CSS样式表中写入 html,body { overflow-x:hidden;}
【遮罩层样式】
1、三个Div层的样式,position都要设为absolute;,因为只有设为absolute时, z-index:属性才会生效!
2、半透明属性:filter:alpha(opacity=50); IE专有属性, 设置层的透明度为 50% ,
??????????????????????????? -moz-opacity:0.5;??? 火狐FF 专有属性,设置层的透明度为 50%。
这两条属性都要加上,因为IE、火狐对其中的单一一条并不兼容~~~
还有一点,你的遮罩层样式中,一定要设置 width 与 height?? ,否则 透明属性不起效~~
3、 z-index: 的顺序,?? z-index:属性的值越小,则该层越在下方,最小值是1
【代码示例】
1 覆盖div
?
#apDiv8 {}{
position:absolute;
left:57px;
top:30px;
width:668px;
height:240px;
z-index:1000;
background-color:#CCCCCC;
filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=true , style=0 , opacity=40);
}
2 事件调用
?
?
?
?
function divH(){
document.getElementById('apDiv8').style.display='block';
}
<div id ="apDiv8" style="display:none;" >
<input type="button" id="btnadd" style="height: 30px; width: 100px;" onClick="divH()" value="Div覆盖" />
看完上述内容后我们在需要屏蔽table事件的时候就可以利用Div+Css实现屏蔽效果,如果你想了解更深一点的可以进入爱站技术频道进行了解哦。
原文链接:https://js.aizhan.com/web_authoring/css/7954.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:H1标签也可以美化
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- 10.布局:两栏和主区域在后的三栏布局,实现侧边栏和主区域伪 2020-04-12
- 5.通过定位实现二级菜单 2020-04-10
- HTML + CSS 布局实现全屏布局 2020-04-10
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash