基于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 相关文章推荐
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
简单的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
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
JS 继承实例分析
2008/11/04 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
Javascript 二维数组
2009/11/26 Javascript
js中判断控件是否存在
2010/08/25 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
Python中使用SAX解析xml实例
2014/11/21 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python 编程速成(推荐)
2019/04/15 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python实现计算器简易版
2020/12/17 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
廉政承诺书
2015/01/19 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
余世维讲座观后感
2015/06/11 职场文书
2016年少先队活动总结
2016/04/06 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书