基于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脚本
Dec 12 Javascript
javascript中的new使用
Mar 20 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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学习之整理字符串
2011/04/17 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JavaScript中的Math 使用介绍
2014/04/21 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
学习Node.js模块机制
2016/10/17 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
Vue实现路由跳转和嵌套
2017/06/20 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python实现输入数字的连续加减方法
2018/06/22 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python如何在DataFrame增加数值
2020/02/14 Python
解决python运行启动报错问题
2020/06/01 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
采购助理岗位职责
2014/02/16 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
奠基仪式策划方案
2014/05/15 职场文书
冬季施工防火方案
2014/05/17 职场文书
创先争优宣传标语
2014/10/08 职场文书
法务专员岗位职责
2015/02/14 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
正则表达式拆分url实例代码
2022/02/24 Java/Android
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫