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

更多：http://www.cnblogs.com/jihua/p/webfront.html

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

  1. PLSQL 登录时弹出(没有登录)空白提示框

    如题,在登录的时候莫名出现了plsql登录时弹出(没有登录)的空白提示框,在网上找了很多方法之后都不行,然后发现plsql的 oracle主目录名莫名的成了空,然后直接重新把它的目录设置上 重启pls ...

  2. IIS访问PHP文件时，弹出用户名和密码提示框的解决方法

    找了一圈,以下的方法解决了IIS访问PHP弹用户名和密码提示框问题. 解决方法:给PHP安装目录everyone读取权限 这样不知道会不会出现安全问题,请大家谨慎.

  3. 从service弹出系统级自定义提示框，可在任意页面弹出

    添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> // 显示 ...

  4. JS基础 浏览器弹出的三种提示框（提示信息框、确认框、输入文本框）

    浏览器的三种提示框 alert() //提示信息框 confirm() //提示确认框 prompt() //提示输入文本框 1.alert( ) 提示信息框 <script> alert ...

  5. JQuery弹出Dialog关闭方式close vs destroy

    $editDialog.iDialog('close')  $(this).dialog('close'); 等Close方法关闭Dialog时,Dialog并不是完全消失,只是隐藏起来.两个Dial ...

  6. QTableView修改数据后弹出是否保存的提示框。

    自定义CustomDelegate继承自QStyledItemDelegate,重写setModelData(self, editor, model, index)方法 def setModelDat ...

  7. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  8. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  9. 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】

    1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

随机推荐

  1. Windows下MySQL无法启动

    问题描述: 从网上下了5.7 的MySQL,在bin目录下执行 start mysqld ,弹出个cmd窗口一闪就没了,也看不清是什么报错.mysqld --install安装了服务,也启动不了.   ...

  2. date命令

    GNU的date提供+%s(小写s), 能打印出自1970-01-01 00:00:00到当前时间的秒数. 这可能大家都不陌生,但有两点需要注意: 1. %s存在于GNU扩展版本.像在solaris等 ...

  3. [免费了] SailingEase .NET Resources Tool （.NET 多语言资源编辑器）

    这是我2010年左右,写 Winform IDE (http://www.cnblogs.com/sheng_chao/p/4387249.html)项目时延伸出的一个小项目. 最初是以共享软件的形式 ...

  4. EasyPR--中文开源车牌识别系统 开发详解（1）

    在上篇文档中作者已经简单的介绍了EasyPR,现在在本文档中详细的介绍EasyPR的开发过程. 正如淘宝诞生于一个购买来的LAMP系统,EasyPR也有它诞生的原型,起源于CSDN的taotao123 ...

  5. 提高代码质量系列之二：重构小技巧——if篇

    前言: if,相信是童鞋们使用的最频繁的关键字了,而且很多时候,我们使用的if都是在无意识的状态下随手而为.键入if,两下回车(我使用了resharper,可以自动编排if的格式),再信手写下我们需要 ...

  6. java太low,又舍不得jvm平台的丰富资源?试试kotlin吧(一)

    尝试kotlin的起因 因为各种原因(版权,人员招聘),公司的技术体系从c#转到了java,我花了大概两周的时间来上手java,发现java的语法还是非常简单的,基本看着代码就知道什么意思.学习jav ...

  7. Retrofit2.0起步篇

    retrofit 英文名字是改装的意思,也就是说他是对网络请求的一种改装,他不负责进行网络请求,他是对请求方式的一种封装.真正进行网络请求的是okhttp. 以下所有内容在Android Studio ...

  8. ES性能测试

    测试背景   因为ES(ElasticSearch)前段时间查询效率有点慢,技术小组对索引做了一些改动,因此需要测试一下修改后的查询效率,跟之前的结果做一下对比,所以有了这次测试.   需求简述   ...

  9. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

  10. <JavaScript语言精粹>--<读书笔记三>之replace()与正则

    今天有人问我repalce(),他那个题目很有意思.我也不会做,于是我就去查,结果发现就是最基础的知识的延伸. 所以啊最基础的知识才是很重要的,千万不能忽略,抓起JS就写代码完全不知到所以然,只知道写 ...