弹出对话框层蒙版-基于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
- 弹出对话框层蒙版-基于lightbox-me插件
- Jquery图片弹出框插件-jQuery lightBox
- Lightbox弹出层图片放大插件
- Jquery图片弹出框插件-jQuery lightBox
- LightBox 对话框
- Lightbox图片放大插件,jQuery弹出层放大插件
- 实现简单的类似Lightbox效果的弹出对话框
- jquery插件弹出对话框
- jquery 弹出对话框插件
- 分享一些基于jquery功能强大的LightBox灯箱效果插件
- 我写的Lightbox效果插件,基于MooTools 1.4
- 弹出对话框的jquery插件
- jquery插件实现弹出对话框
- lightbox弹出窗口插件-弹出广告-兼容IE8和Chrome浏览器
- Lightbox效果弹出窗口代码
- jquery弹出对话框插件一例
- jQuery Dialog弹出层对话框插件演示
- jQuery Dialog 弹出层对话框插件
- [微信机器人_01]智能机器人-奇迹蛋
- MSM8x74 RPM
- 黑马程序员-基础学习总结
- 版本管理系统之GIT
- .net获取传值get和post请求
- 弹出对话框层蒙版-基于lightbox-me插件
- 【LeetCode】- Reverse Integer(将一个整数反转)
- Linux Device Tree Usage
- K-SVD matlab
- HTML5实战与剖析之媒体元素(2、媒体元素的属性)
- 你好,2014!
- MapReduce的input为包含小文件的zip压缩文件的相关实验
- 推荐60个jQuery插件及使用教程
- Linux 父进程如何获取子进程返回值?parent get child process return value,fork,wait,wait_pid