简单演示一下，精简了演示效果和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. K2 blackpearl 流程开发(二)

    转:http://blog.csdn.net/gxiangzi/article/details/8444590 本来想一篇文章把流程开发介绍完的,后来发现实在是太多了,只好分成两部分了.上一篇很简单的 ...

  2. [译]LINT TO SQL 介绍(数据库查询) - Part.3

    出处:Linq To Sql (Part.3 – Querying our database) 术语表 Built-in:内置的 Clause:子句 Debugger:调试器 Object Relat ...

  3. poj 1026(置换群)

    题意:给你一个变换规则,和一个字符串,问经过k次变换后得到的字符串. 思路:开始的时候试图去找它的整个周期,谁知道周期太大了,各种RE,后来在得知此题需要用置换群来优化,第一次接触置换群学习了下! 代 ...

  4. CCMoveTo 等函数理解

    CCMoveTo: 使用CCMoveTo action来让对象从右侧屏幕外移动到屏幕左侧.注意可以通过指定duration参数控制这一过程需要多久,这里我们随机给他2-4秒的时间. CCCallFun ...

  5. The Automated Testing Handbook 自动化测试手册简介

    Learn what works, what doesn't and why. The Automated Testing Handbook is a practical blueprint for ...

  6. 关于webpack最好的文档

    这几天研究webpack打包工具,在网上搜了无数的资料,鱼龙混杂.看了几十份资料,依然没有一个可以完整的描述的. 折腾了那么久,还是放弃治疗了.回到官网,一字一句的阅读,一个小时就彻底明白了. 学习新 ...

  7. linux中的livecd、liveDVD和其他安装方式简介

    下载了几种不同格式的centos版本的iso文件,从而对比下各种iso文件的差别,下载的内容如下: 下载之后,分别在虚拟机中进行安装,从而查看有何区别: 1. 使用LiveCD进行安装 在选择安装介质 ...

  8. LeetCode题解——3Sum Closest

    题目: 给定一个数组,和一个指定的值,找出数组中3个数,它的和最接近这个指定值,并返回这个和. 解法: 和上一题找3个数的和为0一样,先排序再遍历,这一次不需要记录路径. 代码: class Solu ...

  9. bzoj 1009 [HNOI2008]GT考试（DP+KMP+矩阵乘法）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1009 [题意] 给定一个字符串T,问长度为n且不包含串T的字符串有多少种. [思路] ...

  10. Java-note-输入流

    java不像C中拥有scanf这样功能强大的函数,大多是通过定义输入输出流对象.常用的类有BufferedReader,Scanner.实例程序:一,利用 Scanner 实现从键盘读入integer ...