简单演示一下，精简了演示效果和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. Oracle 课程七之分析和动态采样

    课程目标 完成本课程的学习后,您应该能够: •引子—统计信息的作用 •如何收集统计信息 •系统统计信息 •对象统计信息—表.字段.索引统计信息 •动态采样   统计信息的作用 Optimizer st ...

  2. window.history

    作者:zccst 旧版: forword() backword() go(number) HTML5中新增了 onhashchange  浏览器兼容性较好,用得较多 pushState / repla ...

  3. php-PHP试题

    ylbtech-doc:php-PHP试题 PHP试题 1.A,PHP试题返回顶部 1.{PHP题目}标识符是变量的名称.PHP中的标识符用“$+变量名”来表示.标识符在PHP中遵循下列选项中的那些规 ...

  4. Android入门：发送HTTP的GET和POST请求

    HTTP的请求详解在我的博客中已经讲解过: http://blog.csdn.net/xiazdong/article/details/7215296 我在http://blog.csdn.net/x ...

  5. golang学习遭遇错误原因分析续

    7. error: reference to field ‘Printf’ in object which has no fields or methods f.Printf("%v&quo ...

  6. 38、FragmentStatePagerAdapter分页

    [ ViewPager ] ViewPager 如其名所述,是负责翻页的一个 View.准确说是一个 ViewGroup,包含多个 View 页,在手指横向滑动屏幕时,其负责对 View 进行切换.为 ...

  7. awk简单使用『摘.非原创』

    1 awk简介 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入.一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能,是lin ...

  8. Kindle Paperwhite 2使用体验

    博客开通后一懒就扔下了几十天,着实自惭.鉴于是第一篇,先说点题外话. 一转眼读研的生活已经过去一年有余.曾经的同学已经在职场拼搏,同龄人的生活状态也自然地带给自己一份紧迫感:不敢再贪恋校园生活的安逸, ...

  9. （转载）OC学习篇之---类的三大特性：封装，继承，多态

    之前的一片文章介绍了OC中类的初始化方法和点语法的使用,今天来继续学习OC中的类的三大特性,我们在学习Java的时候都知道,类有三大特性:继承,封装,多态,这个也是介绍类的时候,必须提到的话题,那么今 ...

  10. Oauth2 接口api

    weibo:http://open.weibo.com/wiki/API weixin:http://mp.weixin.qq.com/wiki/home/index.html   qq开发平台: 1 ...