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需再刷新一下页面才能执行]

相关文章

  • 使用JavaScript为Kindeditor自定义按钮增加Audio标签

    使用JavaScript为Kindeditor自定义按钮增加Audio标签

    这篇文章主要介绍了使用JavaScript为Kindeditor自定义按钮增加Audio标签的方法,KindEditor是一套开源的HTML可视化编辑器,需要的朋友可以参考下
    2016-03-03
  • 原生js实现俄罗斯方块

    原生js实现俄罗斯方块

    这篇文章主要为大家详细介绍了原生js实现俄罗斯方块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JS+HTML5实现获取手机验证码倒计时按钮

    JS+HTML5实现获取手机验证码倒计时按钮

    这篇文章主要介绍了基于JS+HTML5实现获取手机验证码倒计时按钮,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • Javascript实现页面跳转的几种方式分享

    Javascript实现页面跳转的几种方式分享

    这篇文章介绍了Javascript实现页面跳转的几种方式,有需要的朋友可以参考一下
    2013-10-10
  • JavaScript如何删除字符串中子字符串

    JavaScript如何删除字符串中子字符串

    本文介绍了如何从 JavaScript 中的字符串中删除子字符串,并提供了两种常用的方法:replace() 方法和 split() 方法,结合示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-05-05
  • JS中的6种打断点的方式实例总结

    JS中的6种打断点的方式实例总结

    断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了,下面这篇文章主要给大家介绍了关于JS中6种打断点方式的相关资料,需要的朋友可以参考下
    2022-04-04
  • zTree实现节点修改的实时刷新功能

    zTree实现节点修改的实时刷新功能

    在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了。这篇文章主要介绍了zTree实现节点修改的实时刷新功能,需要的朋友可以参考下
    2017-03-03
  • JavaScript数组类型Array相关的属性与方法详解

    JavaScript数组类型Array相关的属性与方法详解

    这篇文章主要给大家介绍了关于JavaScript数组类型Array相关的属性与方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • ie9 提示''console'' 未定义问题的解决方法

    ie9 提示''console'' 未定义问题的解决方法

    关掉开发者工具之后,在状态栏发现提示'console' 未定义,为什么之前的运行没有问题,之后的就不行呢
    2014-03-03
  • 微信小程序实现侧边分类栏

    微信小程序实现侧边分类栏

    这篇文章主要为大家详细介绍了微信小程序实现侧边分类栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论