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

随机推荐

sublime text 3 + python配置，完整搭建及常用插件安装
四年的时间,一直使用EmEditor编辑器进行Python开发,之前是做面向过程,只需要将一个单独的py文件维护好即可,用着也挺顺手,但是最近在做面向对象的开发,不同的py文件中相互关联较多,感觉单纯 ...
Xamarin.Android之使用百度地图起始篇
一.前言如今跨平台开发层出不穷,而对于.NET而言时下最流行的当然还是Xamarin,不仅仅能够让我们在熟悉的Vs下利用C#开发,在对原生态类库的支持方面也有着非常的好支持,今天我们将会以百度地图类 ...
MonoTouch 二三事（三）mono mkbundle 打包程序的解包支持
2014.10.06 更新编写了 IDA Pro 的插件,用来解包和打包 mkbundle程序,请参见 https://github.com/binsys/MKBundleManager 许久以后, ...
Lesson 17 Always young
Text My aunt Jennifer is an actress. She must be at least thirty-five years old. In spit of this, sh ...
PropertyGrid控件由浅入深(一)：文章大纲
Winform中PropertyGrid控件是一个非常好用的对象属性编辑工具,对于Key-Value形式的数据的处理也是非常的好用. 因为Property控件设计良好,在很小的空间内可以展示很多的内容 ...
Chrome 控制台不完全指南
Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「 ...
我们为什么不能只用O记号来谈论算法？
在刷LeetCode-1TwoSum的时候,有个人在论坛留言,大致意思如下: 我的算法击败了90%的人,O(nlgn)算法比O(n)算法快. 我觉得这个人是不懂算法的.让我一步一步解释. # O的含义 ...
MySQL对时间戳的转换处理
开发中很多时候在数据库里都会存储Long类型的时间戳,而时间戳做比对会相对麻烦我的绝决方案: SELECT FROM_UNIXTIME(LEFT(create_time,10), '%Y-%m-%d ...
如何优雅地使用Sublime Text
Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于难于上手的Vim,浮肿沉重的Eclip ...
SQL Server 批量主分区备份（One Job）
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 案例分析(Case) 实现代码(SQL Codes) 主分区完整.差异还原(Primary B ...

jquery弹出可关闭遮罩提示框

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

随机推荐

热门专题