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

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

转载于:https://www.cnblogs.com/jihua/p/jquerytsk.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用于Spring JPA2后端的REST CXF

在本演示中&#xff0c;我们将使用spring / jpa2后端生成一个REST / CXF应用程序。 该演示演示了分钟项目的轨迹REST-CXF 。 演示2中的模型保持不变。 浓缩保持不变。 但是轨道改变了 添加的是2层&#xff1a; 在JPA2之上具有弹簧集成的DAO层 具有JAX-RS批注的REST-CXF层…

php与服务器关系,php与web服务器关系

1.什么是cgi程序&#xff0c;cgi与fastcgi的区别CGI的中文名称是通用网关接口&#xff0c;是外部应用程序与web服务器之间的接口标准。CGI规范允许web服务器执行外部程序&#xff0c;并将它们的输出发送给web浏览器。而fastcgi则是一个常驻型的cgi&#xff0c;它可以一直执行着…

POJ 3468 A Simple Problem with Integers(线段树:区间更新)

http://poj.org/problem?id3468 题意&#xff1a; 给出一串数&#xff0c;每次在一个区间内增加c&#xff0c;查询[a,b]时输出a、b之间的总和。 思路&#xff1a; 总结一下懒惰标记的用法吧。 比如要对一个区间范围内的数都要加c&#xff0c;在找到这个区间之后&#xff0c;本…

php 新浪url,PHP URL函数详解

php url函数:parse_url()parse_url(PHP 3, PHP 4, PHP 5)parse_url -- 解析 URL&#xff0c;归来其构成局部解释array parse_url ( string url )本函数解析一个 URL 并归来一个关系数组&#xff0c;包括在 URL 中揭示的各种构成局部。本函数不是用来检讨给定 URL 的合法性的&am…

完整的WebApplication JSF EJB JPA JAAS –第1部分

这篇文章将是迄今为止我博客中最大的一篇文章&#xff01; 我们将看到完整的Web应用程序。 最新的技术将完成此工作&#xff08;直到今天&#xff09;&#xff0c;但是我将给出一些提示以显示如何使本文适用于较旧的技术。 在本文的结尾&#xff0c;您将找到要下载的源代码。 您…

Ajax和JavaScript的区别

javascript是一种在浏览器端执行的脚本语言&#xff0c;Ajax是一种创建交互式网页应用的开发技术 &#xff0c;它是利用了一系列相关的技术其中就包括javascript。Javascript是由网景公司开发的一种脚本语言&#xff0c;它和sun公司的java语言是没有任何关系的&#xff0c;它们…

大一

以后准备开始ACM的题目啦转载于:https://www.cnblogs.com/Aiden-/p/6562038.html

概念验证:玩! 构架

我们正在开始一个新项目&#xff0c;我们必须选择Web框架。 我们的默认选择是grails&#xff0c;因为团队已经拥有使用它的经验&#xff0c;但是我决定给Play&#xff01; 和Scala有机会。 玩&#xff01; 有很多很酷的东西&#xff0c;在我的评估中&#xff0c;它得到了很多加…

ldap统一用户认证php,针对LDAP服务器进行身份认证

Symfony提供了不同的方法来配合LDAP服务器使用。Security组件提供&#xff1a;ldap user provider&#xff0c;使用的是form_login_ldap authentication provider&#xff0c;用于针对一台使用了表单登录的LDAP服务器。同所有其他user provider一样&#xff0c;它可以同任何aut…

每天CookBook之JavaScript-039

IIFE的使用<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>039</title> </head> <body></body> <script type"text/javascript"> (function () {var i 0;fu…

Day-6:创建计算字段

字段&#xff1a;基本上与列的意思相同&#xff0c;经常互换使用&#xff0c;计算字段是运行时在SELECT语句内创建的&#xff0c;不实际存在于数据库表中。 拼接字段&#xff1a;将值联结到一起构成单个值 SQL中的SELECT语句中可以使用或||操作符拼接&#xff0c;但mysql中必须…

使用Hibernate加载或保存图像-MySQL

本教程将引导您逐步了解如何使用Hibernate从数据库&#xff08; MySQL &#xff09;保存和加载图像。 要求 对于此示例项目&#xff0c;我们将使用&#xff1a; Eclipse IDE &#xff08;您可以使用自己喜欢的IDE&#xff09;&#xff1b; MySQL &#xff08;您可以使用任何…

javaweb回顾第四篇Servlet异常处理

前言&#xff1a;很多网站为了给用户很好的用户体验性&#xff0c;都会提供比较友好的异常界面&#xff0c;现在我们在来回顾一下Servlet中如何进行异常处理的。 1&#xff1a;声明式异常处理 什么是声明式&#xff1a;就是在web.xml中声明对各种异常的处理方法。 是通过<er…

java开发cs教程,日常运维(一)

w命令&#xff1a;用于查看系统负载、显示已经登陆系统的用户列表&#xff0c;并显示用户正在执行的指令等信息第一行从左面开始显示的信息依次为&#xff1a;时间&#xff0c;系统运行时间&#xff0c;登录用户数&#xff0c;平均负载。第二行开始以及下面所有的行&#xff0c…

coursera 《现代操作系统》 -- 第五周 同步机制(1)

临界区块&#xff08;Critical section&#xff09;指的是一个访问共用资源&#xff08;例如&#xff1a;共用设备或是共用存储器&#xff09;的程序片段&#xff0c;而这些共用资源有无法同时被多个线程访问的特性。&#xff08;不是字面意思的一个区域&#xff0c;是程序片段…

java.lang.NoClassDefFoundError:如何解决–第2部分

本文是我们的NoClassDefFoundError故障排除系列的第2部分。 看一下第1部分 。 它将重点介绍最简单的NoClassDefFoundError问题类型。 本文对于Java初学者来说是理想的选择&#xff0c;我强烈建议您自己编译并运行示例Java程序。 今后将使用以下书写格式&#xff0c;并为您提供&…

Android开发技术周报 Issue#34

教程 Google Develop for Android 系列 前几天在G上看到Google Developers站点&#xff0c;有一个Android系列的文章&#xff0c;分享到个人微博&#xff0c;周末闲来没事就学写了下&#xff0c;把它们简单的翻译了下&#xff0c;没想到一发不可收拾&#xff0c;六篇文章全部都…

php进度条插件,分享8款优秀的 jQuery 加载动画和进度条插件_jquery

加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快&#xff0c;但是我们的网站越来越复杂&#xff0c;同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候&#xff0c;使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式…

卷积神经网络(CNN)与特殊的卷积

各种卷积操作的可视化的显示形式&#xff1a;GitHub - vdumoulin/conv_arithmetic: A technical report on convolution arithmetic in the context of deep learning1. fractionally-strided 卷积 如上图示&#xff0c;输入为 33 &#xff0c;想要卷积上采样成 55 的输出。需要…

JBoss AS 7:自定义登录模块

JBoss AS 7很整洁&#xff0c;但是仍然缺少文档&#xff08;错误消息没有那么有用&#xff09;。 这篇文章总结了如何创建自己的兼容JavaEE的登录模块&#xff0c;以对部署在JBoss AS上的Web应用程序的用户进行身份验证。 提供了一个工作的基本用户名密码模块。 为什么要使用Ja…