简单演示一下，精简了演示效果和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. 了解你的家公家IP

          我们总是在不在家的时候,须要訪问我们的电脑或设备,因为大多数人拥有来自ISP的动态IP,我们能够做一个小型设备来给我们的Android手机发送一个简单的通知,这样我们就能够总有IP用了,有 ...

  2. maven_修改setting ,改为自己私服或者OSC开源中国 [为解决sqlite-jdbc 在中央仓库找不到]

    因为项目要使用到sqlite ,虽然有现成的jar,但是考虑的项目的易用统一管理,决定还是用maven 结果纠结了半天 sqlite-jdbc 在maven默认的仓库根本找不着,于是乎修改 setti ...

  3. Group and sum array of hashes by date

    I have an array of hashes like this: [{:created=>Fri, 22 Jan 2014 13:02:13 UTC +00:00, :amount=&g ...

  4. 【百度地图API】如何获取行政区域的边界？

    原文:[百度地图API]如何获取行政区域的边界? 摘要:以前教过大家如何自行获取行政区域,或者自定义获取一个区域的边界值.今天来教大家直接调用百度地图API1.3(目前最新版本)来获取行政区域的边界值 ...

  5. centos 之7zip

    首先,我得说几句,我第一次进行了实验. 压缩文件夹html rar压缩   成绩5.18M zip压缩  成绩5.06M 7z压缩   成绩870K 第一种,源代码编译安装 官网下载地址:http:/ ...

  6. Linux常用命令3--如何设置IP地址？如何更改系统时间？

    Linux常用命令 系统状态监控 [1]ps:用于显示当前系统中运行的进程. 语法:ps [-option]:常用的参数有:-a;-u;-x;-e;-f. -a:显示所有进程: -u:显示所有用户: ...

  7. linux 虚拟文件系统

    转自:https://www.ibm.com/developerworks/cn/linux/l-cn-vfs/ Linux 允许众多不同的文件系统共存,并支持跨文件系统的文件操作,这是因为有虚拟文件 ...

  8. __doPostBack 未生成

    事情是这样的: asp.net 项目 采用了 DevExpress 第三方控件,然后 网站架设在  win2003 服务器上面. 本地测试 都是 OK的,然而 ,在服务器 上面 却出现了  __doP ...

  9. IS2009制作Oracle 静默安装包（二） 感谢空白先生特许授权

    原文:IS2009制作Oracle 静默安装包(二) 感谢空白先生特许授权 上一篇: IS2009制作Oracle 静默安装包(一)感谢空白先生特许授权本文经原作者特许授权于海洋女神发布,转载请务必注 ...

  10. mysql设置root的密码

    mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass');