如题。
最近希望能够做一个弹出层,这个弹出层可以用来代替原生的alert。
这个弹出层可以根据自己的需要来自定义。整个结构和样式都可以重写。
这是官方主页的地址:http://buckwilson.me/lightboxme/
使用的方法如下:
JS代码:
<!--弹出提示框,js路径可以修改-->
<script src="http://88auto.com.cn/kuanian/res/jquery.lightbox_me.js"></script>
<script>
$('#pop-type0').lightbox_me({ //弹出框代码
centered: true, //居中对话框
closeSelector:'#close0' //绑定关闭按钮
});
</script>
HTML代码:
<!--抽奖提示弹出框-->
<div id="pop-type0" class="pop-type" style="display:none;">
<div class="pop-inner-box">
<p class="pop-title">悦车商城年终大礼 乐享不停!</p>
<p class="pop-gift-type">恭喜您获得了 <span class="money">100元</span> 现金优惠券!</p>
<p class="pop-type-rules">-优惠券将在一个工作日内发放-</p>
<p class="pop-type-rules">-请耐心等待工作人员与您联系-</p>
<p class="pop-type-rules">-悦车商城对此活动保留最终解释权-</p>
<input type="button" class="close" id="close0" />
</div>
</div>
CSS样式:
.pop-type{
width:320px;
height:280px;
background:url(pop-bg.png) repeat;
}
.pop-inner-box{
width:300px;
height:260px;
margin:10px 10px 10px 10px;
background: url(popbg.jpg) repeat;
}
.pop-title{
width:300px;
height:40px;
font-size:14px;
font-family: "微软雅黑";
color: #fff;
background: #c10338;
line-height: 40px;
font-weight: bold;
}
.pop-type-rules{
width:300px;
height:20px;
font-family: "微软雅黑";
font-size:12px;
color:#000;
text-align: center;
line-height: 20px;
}
.pop-gift-type{
width:300px;
height:30px;
font-family: "微软雅黑";
text-align: center;
font-size:12px;
height:30px;
color: #7b3a12;
font-weight: bold;
margin-top: 20px;
margin-bottom:20px;`
}
.money{
font-size:26px;
color:#de002a;
font-style:italic;
}
.close{
display: block;
width:90px;
height:30px;
background: url(confirm.png);
border:none;
margin: 20px auto 0 auto;
}
/*抽奖位置css结束*/