基于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的attr方法来修改onclick值
Jul 07 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue文件运行的方法教学
Feb 12 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
Vue3.0 手写放大镜效果
Jul 25 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
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
php7性能提升的原因详解
2019/10/13 PHP
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Java及python正则表达式详解
2017/12/27 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python实现事件驱动
2018/11/21 Python
python实现控制台打印的方法
2019/01/12 Python
基于Python的PIL库学习详解
2019/05/10 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python如何实现单链表的反转
2020/02/10 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
质量月口号
2014/06/20 职场文书
大学课外活动总结
2014/07/09 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
pandas中对文本类型数据的处理小结
2021/11/01 Python