弹出对话框层蒙版-基于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结束*/



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值