CSS3/jQuery自己定义弹出窗体
2016-04-02 13:54
561 查看
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用
引入style.css index.js
然后将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
引入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
相关文章推荐
- 使用jQuery加载html页面到指定的div
- 使用jQuery设置disabled属性与移除disabled属性
- 【JQuery】调用trigger()方法手动触发指定的事件
- 【JQuery】使用one()方法绑定元素的一次性事件
- 【JQuery】toggle函数
- 10分钟-jQuery操作DOM元素
- 【JQuery】使用hover()方法切换事件
- 自定义jquery插件
- 【JQuery】页面加载时触发ready()事件
- jQuery实现鼠标选文字发新浪微博的方法
- JQuery解析XML的方法小结
- 【JQuery】使用remove()和empty()方法删除元素
- Jquery操作全选,反选等批处理
- 【JQuery】使用each()方法遍历元素
- 【JQuery】使用wrap()和wrapInner()方法包裹元素和内容
- 【JQuery】replaceWith()和replaceAll()替换内容
- 【JQuery】使用before()和after()在元素前后插入内容
- JQuery学习笔记
- JQuery $("#id").val(value); 给select选值不出现问题
- chome, firefox浏览器js的jQuery加载.get(),.ajax()