简单演示一下，精简了演示效果和css样式文件，更利于在项目中的实际应用

引入style.css   index.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>index.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=gbk">

    <link href="style.css" rel="stylesheet" type="text/css"/>

  </head>

  <body>

  <div class="md-modal md-effect-1" id="modal-1">

		<div class="md-content">

			<h3>

				CSS3/jQuery自定义弹出窗口 多种弹出动画

			</h3>

			<div>

				<ul>

					<li>

						这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了.

					</li>

					<li>

						弹出窗口中可以自定义html，十分灵活.

					</li>

					<li>

						另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的.

					</li>

				</ul>

				<button class="md-close">

					关闭!

				</button>

			</div>

		</div>

  </div>

  <div class="md-modal md-effect-2" id="modal-2">

		<div class="md-content">

			<h3>

				CSS3/jQuery自定义弹出窗口 多种弹出动画

			</h3>

			<div>

				<ul>

					<li>

						这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了.

					</li>

					<li>

						弹出窗口中可以自定义html，十分灵活.

					</li>

					<li>

						另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的.

					</li>

				</ul>

				<button class="md-close">

					关闭!

				</button>

			</div>

		</div>

  </div>

  <div class="md-modal md-effect-3" id="modal-3">

		<div class="md-content">

			<h3>

				CSS3/jQuery自定义弹出窗口 多种弹出动画

			</h3>

			<div>

				<ul>

					<li>

						这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了.

					</li>

					<li>

						弹出窗口中可以自定义html，十分灵活.

					</li>

					<li>

						另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的.

					</li>

				</ul>

				<button class="md-close">

					关闭!

				</button>

			</div>

		</div>

  </div>

  <div class="container">

  <button class="md-trigger" data-modal="modal-1">淡入</button>

  <button class="md-trigger" data-modal="modal-2">从右滑动</button>

  <button class="md-trigger" data-modal="modal-3">报纸</button>

  </div>

  </br>

  </br>

  </br>

  <div>全部效果演示请参考：<a target="_blank" href="http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html">

      http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html</a>  </div>

  </body>

  <script src="index.js" type="text/javascript"></script>

</html>

然后将style.css、index.js和index.html放在同一路径下 用chrome或Firefox打开index.html即可

不支持IE浏览器

style.css index.js下载地址：http://download.csdn.net/detail/itmyhome/7433847

参考：http://www.html5tricks.com/category/jquery-plugin

全部效果演示：http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html

CSS3/jQuery自定义弹出窗口的更多相关文章

  1. html5+css3+javascript 自定义弹出窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  2. 读《深入理解Windows Phone 8.1 UI控件编程》1.4.3 框架的应用示例：自定义弹出窗口有感

    前些天买了园子里林政老师的两本 WP8.1 的书籍.毕竟想要学得深入的话,还是得弄本书跟着前辈走的. 今天读到 1.4.3 节——框架的应用示例:自定义弹出窗口这一小节.总的来说,就是弄一个像 Mes ...

  3. 【Android】百度地图自定义弹出窗口

    我们使用百度地图的时候,点击地图上的Marker,会弹出一个该地点详细信息的窗口,如下左图所示,有时候,我们希望自己定义这个弹出窗口的内容,或者,干脆用自己的数据来构造这样的弹出窗口,但是,在百度地图 ...

  4. html里面自定义弹出窗口

    网页上默认的提示框或对话框一般比较丑,可以利用div遮盖层来自定义对话框 1.定义一个按钮或者链接(项目里面是通过点击一个图片) <img src="images/zz.gif&quo ...

  5. jQuery的弹出窗口插件colorbox

    官方网站:http://colorpowered.com/colorbox/ 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架. 通过CSS 控制外观,使用用户可以很容易重新定制外观 ...

  6. Jquery弹出窗口

    今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = functi ...

  7. UpdatePanel无法直接弹出窗口的解决

    UpdatePanel无法直接弹出窗口的解决 2010-06-20  来自:博客园  字体大小:[大 中 小] 摘要:本文介绍一些UpdatePanel无法直接弹出窗口的解决方法 ///<sum ...

  8. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  9. jQuery插件---轻量级的弹出窗口wBox

    Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层, ...

随机推荐

  1. WIN2003+IIS6+FastCGI+PHP5.4.30的安装配置

    原文:WIN2003+IIS6+FastCGI+PHP5.4.30的安装配置 说明:PHP5.5已不支持win2003了,Win2003最高能安装PHP5.4.30. 安装好系统:并且安装好IIS6. ...

  2. 性能优化（一个）Hibernate 使用缓存（一个、两、查询）提高系统性能

    在hibernate有三种类型的高速缓存,我们使用最频繁.分别缓存.缓存和查询缓存.下面我们使用这三个缓存中的项目和分析的优点和缺点. 缓存它的作用在于提高性能系统性能,介于应用系统与数据库之间而存在 ...

  3. SHDocVw， AxSHDocVw的引用

    原文:SHDocVw, AxSHDocVw的引用 SHDocVw的引用SHDocVw一定要在下面这个路径找: 类似 C:\Program Files\Microsoft Visual Studio 9 ...

  4. Win7搭建NodeJs开发环境

    Win7搭建NodeJs开发环境以及HelloWorld展示—图解 Windows 7系统下搭建NodeJs开发环境(NodeJs+WebStrom)以及Hello World!展示,大体思路如下:第 ...

  5. [SQLXML]FOR XML语法导出XML的易错之处

    原文:[SQLXML]FOR XML语法导出XML的易错之处 [SQLXML]FOR XML语法导出XML的易错之处 Version Date Creator Description 1.0.0.1 ...

  6. Codeforces 113A-Grammar Lessons（实现）

    A. Grammar Lessons time limit per test 5 seconds memory limit per test 256 megabytes input standard ...

  7. ASP.NET MVC基于标注特性的Model验证：将ValidationAttribute应用到参数上

    原文:ASP.NET MVC基于标注特性的Model验证:将ValidationAttribute应用到参数上 ASP.NET MVC默认采用基于标准特性的Model验证机制,但是只有应用在Model ...

  8. js 正则之 控制字符 \cX

    原文:js 正则之 控制字符 \cX 前些天在司徒正美的群里有人问了这么个问题:正则表达式里特殊字符 \cX 到底是什么?确实,我之前也挺在意的,但是一直没去看到底是什么.在MDN上只说是控制字符(详 ...

  9. [强烈推荐]ORACLE PL/SQL编程详解之七：程序包的创建与应用(聪明在于学习，天才在于积累！)

    原文:[强烈推荐]ORACLE PL/SQL编程详解之七:程序包的创建与应用(聪明在于学习,天才在于积累!) [强烈推荐]ORACLE PL/SQL编程详解之七: 程序包的创建与应用(聪明在于学习,天 ...

  10. List<string>和string[]

    List<string>和string[] List<string>是集合:string[]是数组: ///////////////////////////////////// ...