弹出对话框层蒙版-基于lightbox-me插件

来源:互联网 发布:java 写sql存储过程 编辑:程序博客网 时间:2024/06/05 04:58

如题。

        最近希望能够做一个弹出层,这个弹出层可以用来代替原生的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
原创粉丝点击