位置: 编程技术 - 正文
推荐整理分享分享两款带遮罩的jQuery弹出框(遮罩有什么作用),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:遮罩有什么作用,遮罩的使用方法,分享两款带遮罩的软件,遮盖带推荐,分享两款带遮罩的软件,遮罩的使用方法,分享两款带遮罩的游戏,分享两款带遮罩的游戏,内容如对您有帮助,希望把文章链接给更多的朋友!
第一款:页面遮罩弹出框是最常见的一种状况,用jQuery完成页面遮罩弹出框,主要用的技能有JQuery,css与html。
html代码下列:
css代码以下:
jQuery代码以下:
第二款:简单制作一个jQuery遮罩层,当然也可以做成公共函数,方便以后多次使用.本教程适合新手。
首先给出html:
遮罩层的样式如下:
最后是jQuery来实现弹出层的显示和隐藏:
总结:使用jQuery实现遮罩的思路就是点击按钮的时候触发遮罩层,过弹出层的css层级z-index让遮罩层遮住整个页面,同时通过弹出层的css层级z-index高于遮罩层,这样弹出层就高亮显示了。然后点击关闭弹出层按钮的时候,让弹出层隐藏,同时也让遮罩层隐藏。这种方法写法是比较快速的,后续有空我会把这段代码写成公共函数,这样方便多次调用。
标签: 遮罩有什么作用
本文链接地址:https://www.jiuchutong.com/biancheng/379237.html 转载请保留说明!上一篇:jQuery拖动元素并对元素进行重新排序(jquery移动节点的方法)
下一篇:基于jQuery实现美观且实用的倒计时实例代码(jquery教程chm)
友情链接: 武汉网站建设