您的位置：首页 > Web前端

前端弹窗插件,layer

2016-06-08 19:21 411 查看

一个前端弹窗插件

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航