基于jQuery实现弹出可关闭遮罩提示框实例代码


Posted in Javascript onJuly 18, 2016

jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果

先给大家展示下效果图,如果大家感觉还不错,请参考实现代码。

基于jQuery实现弹出可关闭遮罩提示框实例代码

效果演示

关键代码如下所示:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JQuery-CSS3制作简洁的弹框_何问起</title>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/85/style.css">
<style>.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}</style>
</head>
<body>
<div class="hovertreeinfo"><h2>jquery CSS3制作简洁遮罩弹出层动画</h2>
几种常见的简洁弹框</div>
<div class="checkbox">
<a href="javascript:0;" class="cd-popup-trigger0">样式1</a>
<a href="javascript:0;" class="cd-popup-trigger1">样式2</a>
<a href="javascript:0;" class="cd-popup-trigger2">样式3</a>
<a href="javascript:0;" class="cd-popup-trigger3">样式4</a>
</div>
<!--弹框-->
<div class="cd-popup">
<div class="cd-popup-container">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="cd-popup1">
<div class="cd-popup-container1">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了,更多特效:<a href="http://hovertree.com/texiao/" target="_blank">http://hovertree.com/texiao/</a>
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="cd-popup2">
<div class="cd-popup-container2">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="cd-popup3">
<div class="cd-popup-container3">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="hovertreeinfo"><a href="http://hovertree.com" target="_blank">何问起</a>
<a href="http://hovertree.com/menu/texiao/" target="_blank">网页特效</a>
<a href="http://hovertree.com/h/bjaf/0ai05muy.htm" target="_blank">代码说明</a></div>
<script type="text/javascript">
/*弹框JS内容*/
jQuery(document).ready(function($){
//打开窗口
$('.cd-popup-trigger0').on('click', function(event){
event.preventDefault();
$('.cd-popup').addClass('is-visible');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
//打开窗口
$('.cd-popup-trigger1').on('click', function(event){
event.preventDefault();
$('.cd-popup1').addClass('is-visible1');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup1').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup1') ) {
event.preventDefault();
$(this).removeClass('is-visible1');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup1').removeClass('is-visible1');
}
});
//打开窗口 by 何问起
$('.cd-popup-trigger2').on('click', function(event){
event.preventDefault();
$('.cd-popup2').addClass('is-visible2');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup2').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup2') ) {
event.preventDefault();
$(this).removeClass('is-visible2');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup2').removeClass('is-visible2');
}
});
//打开窗口
$('.cd-popup-trigger3').on('click', function(event){
event.preventDefault();
$('.cd-popup3').addClass('is-visible3');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup3').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup3') ) {
event.preventDefault();
$(this).removeClass('is-visible3');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup3').removeClass('is-visible3');
}
});
});
</script>
</body>
</html>

以上所述是小编给大家介绍的基于jQuery实现弹出可关闭遮罩提示框实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
简单的js分页脚本
May 21 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
简单的JS轮播图代码
Jul 18 #Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 #Javascript
Bootstrap零基础学习第一课之模板
Jul 18 #Javascript
深入分析javascript中的错误处理机制
Jul 17 #Javascript
javascript正则表达式中分组详解
Jul 17 #Javascript
最佳的JavaScript错误处理实践
Jul 16 #Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php设置编码格式的方法
2013/03/05 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
js创建对象的方式总结
2015/01/10 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
python复合条件下的字典排序
2020/12/18 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
优秀团员自我评价范文
2014/04/23 职场文书
提拔干部考察材料
2014/05/26 职场文书
运动会运动员赞词
2015/07/22 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
Vue和Flask通信的实现
2021/05/19 Vue.js
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
Win10 Anaconda安装python-pcl
2022/04/29 Servers