关于前端自动弹窗页面
2016-06-08 19:19
465 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>您已成功免费预约</title> <style> *{ margin:0px; padding:0px;} /*弹出css开始*/ .layer_box { display:none; width:500px; height:500px; background:#FFFFFF; margin:0px auto; text-align:center; font-family: Microsoft YaHei;} .layer_box h2,.layer_box h3,.layer_box h4 {font-size: 100%; font-weight: 500;} .layer_icon { padding-top:56px; padding-bottom:38px;} .layer_icon span{ display:block; background:url(layer/layer_icon.png) no-repeat center center; width:88px; height:88px; margin:0px auto;} .layer_box h2,.layer_box h3 { font-size:26px; color:#171717;} .layer_box h3 span { color:#0f95da;} .layer_box h4 { font-size:24px; padding-top:44px;} .layer_box h4 cite { color:#e9130e;font-style:normal;} .layer_info { padding-top:60px; color:#7a7a7a;} .layer_info a { color:#e9130e;} /*弹出css结束*/ </style> </head> <body><br> <br> <div id="test1">点击弹出</div> <div id="tong" class="layer_box"> <div class="layer_icon"><span></span></div> <h2>您已成功免费预约!</h2> <h3>预约号:<span>14720417</span></h3> <h4><cite>6月20日10点开售</cite>,请别忘记哦!</h4> <p class="layer_info">发送预约号到美贝壳公众号领取红包!<a href="#" target="_blank">领取说明</a></p> </div> <script src="layer/jquery.min.js"></script> <script src="layer/layer.js"></script> <script> $('#test1').on('click', function(){ layer.open({ type: 1, title: false, closeBtn: 1, area: '516px', shadeClose: true, content: $('#tong') }); }); </script> </body> </html>
可以直接用layer插件,功能特别的强大!网址是点击打开链接http://layer.layui.com/
相关文章推荐
- js函数的赋值和调用
- JS中NaN值与isNaN()函数
- jstorm学习
- jquery输入数字随机抽奖特效
- 在Servlet/JSP的学习中
- js跨域访问
- JavaScript的instanceof运算符学习教程
- 前端SEO
- JavaScript中instanceof运算符的使用示例
- [caffe]extract feature
- VC中程序调用Js自定义函数的注意事项
- 【JSHint解读二】 jshint 配置解析
- Javascript 注入攻击
- WebBrowser介绍——Javascript与C++互操作
- 前端路由
- 实例讲解JavaScript中instanceof运算符的用法
- [前端框架]React
- nodejs从零开始--菜鸟爬坑之旅
- javascript浅谈数组的声明
- Bootstrap输入框组