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设计的宗旨 ...

随机推荐

跟着老男孩教育学Python开发【第二篇】：Python基本数据类型
运算符设定:a=10,b=20 . 算数运算 2.比较运算 3.赋值运算 4.逻辑运算 5.成员运算基本数据类型 1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**3 ...
NYOJ 998
这道题是欧拉函数的使用,这里简要介绍下欧拉函数. 欧拉函数定义为:对于正整数n,欧拉函数是指不超过n且与n互质的正整数的个数. 欧拉函数的性质:1.设n = p1a1p2a2p3a3p4a4...pk ...
二次剩余、三次剩余、k次剩余
今天研究了一下这块内容...首先是板子 #include <iostream> #include <stdio.h> #include <math.h> #incl ...
我的MYSQL学习心得（十三）权限管理
我的MYSQL学习心得(十三) 权限管理我的MYSQL学习心得(一) 简单语法我的MYSQL学习心得(二) 数据类型宽度我的MYSQL学习心得(三) 查看字段长度我的MYSQL学习心得(四) ...
记从安装centos系统在到使用mono3.2部署MVC过程遇到的问题
一.安装虚拟机并安装配置系统我不太愿意去下载vmware就用系统里面自带的Hyper-V 系统我选择了最新版本的CentOs6.4 下载地址:http://mirrors.163.com/cento ...
ABP理论之时间
返回总目录本篇目录介绍 Clock 时区绑定器和转换器介绍虽然有些应用针对的是一个特定的时区,但是也有一些应用针对多个不同的时区.为了满足这些需求,ABP为datetime操作提供了通用的基 ...
【腾讯Bugly干货分享】动态链接库加载原理及HotFix方案介绍
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bec216d81f2415515d3e9c 作者:陈昱全引言随着项目中动 ...
前端构建大法 Gulp 系列 (四)：gulp实战
前端构建大法 Gulp 系列 (一):为什么需要前端构建前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家前 ...
Threadlocal使用Case
Threadlocal能够为每个线程分配一份单独的副本,使的线程与线程之间能够独立的访问各自副本.Threadlocal 内部维护一个Map,key为线程的名字,value为对应操作的副本. /** ...
模拟实现Spring中的注解装配
本文原创,地址为http://www.cnblogs.com/fengzheng/p/5037359.html 在Spring中,XML文件中的bean配置是实现Spring IOC的核心配置文件,在 ...

jquery弹出可关闭遮罩提示框

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

随机推荐

热门专题