弹窗遮罩层原理及实现

一、说明:

       我们知道,如果在网页中需要加载一个弹窗时同常是不希望点击到弹窗以外的区域从而导致错误操作的。这个时候呢我们就可以使用遮罩层来实现弹窗外部区域屏蔽的功能。

 

二、原理:

       在弹窗和页面之间创建一个div并使之铺满整个屏幕,同时让这个div半透明。这样我们就可以即能看到页面的内容,又无法点击到弹窗外的内容了。

 

三、用到的技术:

        js控制display的属性值以及设置遮罩层opacity的值为0.3 (小于1就行)

四、范例:





遮罩层





    打开遮罩
    


    
    

        关闭
    


也欢迎登录我的个人网站,里面有更多的文章及技术咨询在等你:http://www.guangmuhua.com

你可能感兴趣的:(网页设计)