弹出对话框层蒙版-基于lightbox-me插件_蒙版弹窗插件-优快云博客

如题。

最近希望能够做一个弹出层，这个弹出层可以用来代替原生的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结束*/