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

随机推荐

Android代码分析工具lint学习
1 lint简介 1.1 概述 lint是随Android SDK自带的一个静态代码分析工具.它用来对Android工程的源文件进行检查,找出在正确性.安全.性能.可使用性.可访问性及国际化等方面可能 ...
Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
Spark笔记：RDD基本操作（下）
上一篇里我提到可以把RDD当作一个数组,这样我们在学习spark的API时候很多问题就能很好理解了.上篇文章里的API也都是基于RDD是数组的数据模型而进行操作的. Spark是一个计算框架,是对ma ...
Tomcat服务无法启动的问题
去年下半年公司就决定投入人力物力"跟风"做大数据方向的研究并应用到后续项目中,于是乎,我们也得熟悉下Java才行了. 先弄个JavaEE的开发环境再说吧.装JDK.JRE,其实JD ...
spring各jar包作用(转载)
除了spring.jar文件,Spring还包括有其它13个独立的jar包,各自包含着对应的Spring组件,用户可以根据自己的需要来选择组合自己的jar包,而不必引入整个spring.jar的所有 ...
【原】得心应手小工具开发——IE代理快速切换工具
一.引入因为公司里上外网要经常换IE代理地址,每次切换地址都要进到Internet Options里去设置一番,经常切换的话很是麻烦,由于用了点时间作个小工具来方便自己. 二.实现思路其实思路很简 ...
linux安装mvn后提示权限不够
Maven - 环境配置 Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK. 系统要求项目要求 JDK Maven 3.3 要求 JDK 1.7 或以上Maven 3 ...
PHP 高级编程(3/5) - 使用SPL(标准PHP库)实现观察者模式
SPL(标准PHP库 - Standard PHP Library)是PHP5面向对象功能中重要的部分.原文解释是这样的“The Standard PHP Library (SPL) is a col ...
ROC曲线、PR曲线
在论文的结果分析中,ROC和PR曲线是经常用到的两个有力的展示图. 1.ROC曲线 ROC曲线(receiver operating characteristic)是一种对于灵敏度进行描述的功能图像. ...
Angular学习-指令入门
1.指令的定义从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签.指令可以很简单,也可以很复杂.AngularJS的HTML编译器会解析指令,增强模板的功能.也是组件化未来的发展趋势, ...

jquery弹出可关闭遮罩提示框

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

随机推荐

热门专题