简单演示一下，精简了演示效果和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. Android初级教程以动画的形式弹出窗体

    这一篇集合动画知识和弹出窗体知识,综合起来以动画的形式弹出窗体. 动画的知识前几篇已经做过详细的介绍,可翻阅前面写的有关动画博文.先简单介绍一下弹出窗体效果的方法: 首先,需要窗体的实例:PopupW ...

  2. jquery效果 窗口弹出案例

    效果 ①基本效果:show().hide().toggle() ②滑动 slideDown().slideUp().slideToggle() 划上:$("p").slideUp( ...

  3. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  4. MVVM模式下弹出窗体

    原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...

  5. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  6. 基于jQuery向下弹出遮罩图片相册

    今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...

  7. gridView AspNetPager 翻页时 弹出窗体关闭报错

    gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...

  8. Ext入门学习系列（二）弹出窗体

    第二章 弹出窗体 上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理. 一.Ext的窗体长什么样? 先来看看几个效果, ...

  9. C#利用API制作类似QQ一样的右下角弹出窗体

    C#利用API制作类似QQ一样的右下角弹出窗体 (2009-03-21 15:02:49) 转载▼ 标签: 杂谈 分类: .NET using System;using System.Collecti ...

随机推荐

  1. ASP.NET缓存策略经验谈

    要提升ASP.NET应用程序的性能,最简单.最有效的方式就是使用内建的缓存引擎.虽然也能构建自己的缓存,但由于缓存引擎已提供了如此多的功能,所以完全不必如此麻烦.在很大程度上,ASP.NET开发者在W ...

  2. [转] C# 泛型类型参数的约束

    啊.紫原文C# 泛型类型参数的约束 在定义泛型类时,可以对客户端代码能够在实例化类时用于类型参数的类型种类施加限制.如果客户端代码尝试使用某个约束所不允许的类型来实例化类,则会产生编译时错误.这些限制 ...

  3. 使ViewFlipper中的WebView实现手势效果

    使ViewFlipper中的WebView实现手势效果   今天写Blog阅读器的时候遇到了这个问题,把它分享给大家,让同样是新手们少走冤枉路始初写这个功能的时候,用过了好多方法,也耗了不少时间去研究 ...

  4. 对delegate进行扩展 打造通用的"计时完成"方法 z

    让用户尽量少打字 每次让用户输入这么多信息的确很糟糕, 可以改进一下设计: 服务器IP和用户名可以存放在配置文件里面, 初始化的时候默认加载到相应的文本框中; 从安全角度考虑, 密码必须经过用户手动输 ...

  5. Qt加载网页(加载浏览器插件)和制作托盘后台运行(南信大财务报账看号)

    程序模块要添加QNetWork和QWebKit模块: nuistfinancevideo.h文件: #ifndef NUISTFINANCEVIDEO_H #define NUISTFINANCEVI ...

  6. C#条件语句、循环语句

    一.程序的三种结构 顺序结构 分支结构 循环结构 二.条件语句if 语句是最有用的控制结构之一. if … else …语句的语法: if (布尔表达式)执行操作的语句  或if (布尔表达式)执行操 ...

  7. ASP.NET常用加密解密方法

    ASP.NET常用加密解密方法 一.MD5加密解密 1.加密 C# 代码           public static string ToMd5(string clearString)        ...

  8. CSS基础（背景、文本、列表、表格、轮廓）

    CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. backgr ...

  9. Apache Hadoop 镜像地址

    HTTP http://apache.fayea.com/ http://apache.opencas.org/ http://mirror.bit.edu.cn/apache/ http://mir ...

  10. Spark计算工作流

    下图 中描述了 Spark 的输入.运行转换.输出.在运行转换中通过算子对 RDD进行转换.算子是 RDD 中定义的函数,可以对 RDD 中的数据进行转换和操作.‰ 输入:在 Spark 程序运行中, ...