javascript创建页面蒙板的一些知识技巧总结第1/3页
更新时间：2007年08月19日 12:12:45 作者：
在ajax大行其道的今天，模拟弹出窗口，或者thinkbox，greybox等很多特效都用了蒙板的功能，其应用原来对于我们来说也很简单：创建一个绝对定位，top/left都为0，宽度和高度等于浏览器内容的高宽，然后索引设置的大点即可。可是这里有一些问题和技巧可能是您一直都不知道或者不清楚的，这里总结几点，这些都是个人学习的过程中发现的。
1、创建的蒙板如果要禁止对蒙板下部内容的操作必须设置background属性且必须设置一个有效的值，否则虽然遮罩层创建成功，但仍然可以对页面下部的元素进行操作。
2、如果要显示页面底部的元素可以通过css设置透明度来实现，如filter:alpha(opacity=0)，这里是完全透明，淡然也可以设置为半透明。
3、div层形成的蒙板可以蒙住iframe，但不能盖住select及object。
4、可以使用iframe可以遮盖select，一般使用iframe和div结合的办法遮盖select（div所以要比iframe的z索引高）并创建内容，其实iframe会自动隐藏select，也可以自己只使用div和js隐藏select。
5、对于使用js隐藏select的方法多数是在创建真正的蒙板时使用，如弹出框或thinkbox等。对于使用iframe和div的办法主要用于局部蒙板，如日期控件或title弹出时使用iframe和div定位在同一位置可以遮盖住其下的select控件。
以下为上面一些总结的演示：
(1)不设置background属性的div蒙板。{蒙板出现后背后元素依然可以操作}
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
1、创建的蒙板如果要禁止对蒙板下部内容的操作必须设置background属性且必须设置一个有效的值，否则虽然遮罩层创建成功，但仍然可以对页面下部的元素进行操作。
2、如果要显示页面底部的元素可以通过css设置透明度来实现，如filter:alpha(opacity=0)，这里是完全透明，淡然也可以设置为半透明。
3、div层形成的蒙板可以蒙住iframe，但不能盖住select及object。
4、可以使用iframe可以遮盖select，一般使用iframe和div结合的办法遮盖select（div所以要比iframe的z索引高）并创建内容，其实iframe会自动隐藏select，也可以自己只使用div和js隐藏select。
5、对于使用js隐藏select的方法多数是在创建真正的蒙板时使用，如弹出框或thinkbox等。对于使用iframe和div的办法主要用于局部蒙板，如日期控件或title弹出时使用iframe和div定位在同一位置可以遮盖住其下的select控件。
以下为上面一些总结的演示：
(1)不设置background属性的div蒙板。{蒙板出现后背后元素依然可以操作}
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
这篇文章主要为大家详细介绍了如何运用js教你轻松制作html音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了微信小程序swiper禁止用户手动滑动代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
[蓝色]颜色渐变效果...2006-07-07
条件表达式，是我们在coding过程中永远躲不开的问题，也是我们骗代码行数最方便的东西，但作为一名程序员，我们也要追求自己的“信达雅”，下面就让我们看看以下几种常见的条件表达场景，如何写的漂亮！2021-05-05
本文将详细介绍a标签上的点击事件的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了详解ES6中的三种异步解决方案，详细的介绍了这三种方案的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了director.js实现前端路由使用实例,director.js是最纯粹的路由注册/解析器,它在不刷新页面的情况下,利用“#”符号组织不同的URL路径,需要的朋友可以参考下2015-02-02
这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了JS实现京东商品分类侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
下面小编就为大家带来一篇关于Promise 异步编程的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论