作者:jizi456 | 来源:互联网 | 2017-05-11 23:50
CSS+Javascript
实现原理:
创建一个满屏的p,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的p,这个时候它就不会被满屏p遮盖。在默认状态下这两个p的display属性值是none。当点击相应的按钮可以更改他们的display属性值。
脚本之家欢迎您,
以上实现了基本的遮罩功能,当点击弹出遮罩,会弹出一个对象,当点击关闭,遮罩效果消失。
纯Javascript:
实现效果:弹出一个窗口的时候,窗口后面的页面变暗,并且不能操作。
难点:因为p层是不能把select控件遮住的,所以要特殊处理,方法两种,一种是在弹出窗口下面加一层iframe来遮住select;第二种是所以要在弹出的时候,先把select控件隐藏,这里选择第二种方法。
实现原理:在页面上和弹出窗口中间加一个半透明的层,把页面的内容覆盖掉 。
代码:
关闭
打开遮罩