位置: 编程技术 - 正文
推荐整理分享jquery实现简单的遮罩层(jquery使用教程),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:jquery实战,jquery的实现原理,jquery简单例子,jquery实战,jquery怎么写,使用jquery实现的项目,jquery技巧,用jquery,内容如对您有帮助,希望把文章链接给更多的朋友!
本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现、mask实现遮罩层等,分享给大家供大家参考,具体内容如下
一、jQuery实现遮罩层的不同样式1.1 背景半透明遮罩层样式需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:
1.2 jQuery实现遮罩
1.3 提示框遮罩的目的无非让人无法操作内容,突出提示框,而提示框可参考上面的制作,z-index比遮罩层更高便可。主要问题是,如何控制提示框在浏览器居中。
二、Jquery超简单遮罩层实现代码在开发中,为了避免二次提交,遮罩层的运用越来越普遍看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式:1.样式如下设置:CSS代码:
其中:opacity:0.5;适用于IE, -moz-opacit:0.5;适用于火狐;你只需要都加上,便可以火狐和IE下都可以使用。2.指定层的高度、和宽度js代码
3.在<body>中加入如下代码,然后就可以看到效果
html代码
4.使用方法在ajax提交表单后,加上showMask方法,数据返回后,加上hideMask()需要的亲们可以根据自己需求,在遮罩层上面加一些提示信息
三、发布个JQuery的遮罩层实现(mask)
用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。好了不多说,上我的代码,这些代码是根据网上的一位朋友实现的documentMask基础上进行整改的,使用上更加灵活方便了。
下面是使用实例代码可供参考
标签: jquery使用教程
本文链接地址:https://www.jiuchutong.com/biancheng/384669.html 转载请保留说明!友情链接: 武汉网站建设