简单演示一下，精简了演示效果和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. [译文]c# /.Net 技巧: ToDictionary() and ToList()

    前言: 有两个简单好用的LINQ扩展方法 ToDictionary() 和ToList(),你可能知道或不知道,但是它的的确确可以简化查询转化为集合的任务: 简介: LINQ和延迟执行 据你所认识的L ...

  2. 针对不同手机系统的LBS地图定位解决方案

    原文:针对不同手机系统的LBS地图定位解决方案 摘要: 针对目前的三种手机系统:Android安卓.S60塞班.IOS苹果,做出的三种不同的手机地图应用解决方案. 查阅了多数地图API对手机的支持情况 ...

  3. [Android]Parcelable encountered IOException writing serializable object (name = xxx)

    Activity之间通过Intent传递值,支持基本数据类型和String对象及它们的数组对象byte.byte[].char.char[].boolean.boolean[].short.short ...

  4. 超高性能的json序列化

    超高性能的json序列化之MVC中使用Json.Net 超高性能的json序列化之MVC中使用Json.Net 先不废话,直接上代码 Asp.net MVC自带Json序列化 1 /// <su ...

  5. Require.JS 2.0

    就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...

  6. MVC+UnitOfWork+Repository+EF

    MVC+UnitOfWork+Repository+EF UnitOfWork+Repository模式简介: 每次提交数据库都会打开一个连接,造成结果是:多个连接无法共用一个数据库级别的事务,也就无 ...

  7. 3. SQL Server数据库状态监控 - 可用空间

    原文:3. SQL Server数据库状态监控 - 可用空间 数据库用来存放数据,那么肯定需要存储空间,所以对磁盘空间的监视自然就很有必要了. 一. 磁盘可用空间 1. 操作系统命令或脚本.接口或工具 ...

  8. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  9. Erlang运行时的错误

    Erlang运行时发生错误时,会返回一些错误信息,理解这些信息,对于学好.用好Erlang来说是必要. Erlang中的运行错误包括:badarg, badarith, badmatch, funct ...

  10. Shell的学习就从重装系统开始吧

    小标题:与Fedora的爱恨情仇 干巴巴的shell学习实在枯燥,看来学习姿势还是要从实践入手 起因:传说中的不作死就不会死,昨晚偶遇一本PDF,讲glade编辑界面的,以下就被吸引了,跟着讲解搞出个 ...