jquery弹出可关闭遮罩提示框

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

效果展示 http://hovertree.com/texiao/jquery/85/

代码如下：

<!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">

               1 自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了

            </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">

              2  自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了,更多特效：<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">

              3  自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了

            </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">

             4   自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了

            </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>

转自：http://hovertree.com/h/bjaf/0ai05muy.htm

jquery弹出可关闭遮罩提示框的更多相关文章

PLSQL 登录时弹出(没有登录)空白提示框
如题,在登录的时候莫名出现了plsql登录时弹出(没有登录)的空白提示框,在网上找了很多方法之后都不行,然后发现plsql的 oracle主目录名莫名的成了空,然后直接重新把它的目录设置上重启pls ...
IIS访问PHP文件时，弹出用户名和密码提示框的解决方法
找了一圈,以下的方法解决了IIS访问PHP弹用户名和密码提示框问题. 解决方法:给PHP安装目录everyone读取权限这样不知道会不会出现安全问题,请大家谨慎.
从service弹出系统级自定义提示框，可在任意页面弹出
添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> // 显示 ...
JS基础浏览器弹出的三种提示框（提示信息框、确认框、输入文本框）
浏览器的三种提示框 alert() //提示信息框 confirm() //提示确认框 prompt() //提示输入文本框 1.alert( ) 提示信息框 <script> alert ...
JQuery弹出Dialog关闭方式close vs destroy
$editDialog.iDialog('close') $(this).dialog('close'); 等Close方法关闭Dialog时,Dialog并不是完全消失,只是隐藏起来.两个Dial ...
QTableView修改数据后弹出是否保存的提示框。
自定义CustomDelegate继承自QStyledItemDelegate,重写setModelData(self, editor, model, index)方法 def setModelDat ...
jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
jquery制作弹出层带遮罩效果，点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

随机推荐

Git学习笔记一：新建本地仓库及初始化
1.百度搜索Git下载安装,直接按默认选项安装即可. 例如:Git-2.7.2-32-bit_setup.1457942412.exe 2.配置Git信息,建立版本仓库 (Alt+PrintScerr ...
大数据之Yarn——Capacity调度器概念以及配置
试想一下,你现在所在的公司有一个hadoop的集群.但是A项目组经常做一些定时的BI报表,B项目组则经常使用一些软件做一些临时需求.那么他们肯定会遇到同时提交任务的场景,这个时候到底如何分配资源满足这 ...
【腾讯Bugly干货分享】移动客户端中高效使用SQLite
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57b57f2a0703f7d31b9a3932 作者:赵丰导语 iOS 程序能 ...
MyBatis6：MyBatis集成Spring事物管理（下篇）
前言前一篇文章<MyBatis5:MyBatis集成Spring事物管理(上篇)>复习了MyBatis的基本使用以及使用Spring管理MyBatis的事物的做法,本文的目的是在这个的基 ...
windows phone如何才能在中国翻身？
最近的新闻告诉我们,Android和IOS的系统继续保持市场领先,并且Android的市场份额达到了历史最高点. 做为windows phone的消费者,作为微软粉丝,我感到十分的不爽. 前几天MIU ...
搭建一个简单的mybatis框架
一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...
Vue插件开发入门
相对组件来说,Vue 的插件开发受到的关注要少一点.但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能. 大家一般习惯直接调用现成的插件,比如官方推荐的 vue-router.vu ...
javaScript语法总结
一:语法 JavaScript:一种基于对象和事件驱动得客户端脚本语言: 由下面三者组成: 1,ECMAScript(一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer ...
jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://git ...
python网络爬虫新浪博客篇
上次写了一个爬世纪佳缘的爬虫之后,今天再接再厉又写了一个新浪博客的爬虫.写完之后,我想了一会儿,要不要在博客园里面写个帖子记录一下,因为我觉得这份代码的含金量确实太低,有点炒冷饭的嫌疑,就是把上次的代 ...

jquery弹出可关闭遮罩提示框

jquery弹出可关闭遮罩提示框的更多相关文章

随机推荐

热门专题