在我们做项目的过程中难免会让弹出层来展示一些信息，这里推荐一款比较不错的jquery插件wbox
简介
- jQuery wBox plugin
- wBox是一个轻量级的弹出窗口jQuery插件，基于jQuery1.4.2开发，
- 主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面等功能
使用方法
下载wbox，目录结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>wbox弹框测试学习</title>
<link rel="stylesheet" type="text/css" href="wbox/wbox/wbox.css"/>
<script type="text/javascript" src="wbox/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="wbox/wbox.js"></script>
</head>
<body>
<button id="selectMenu" onclick="openMenu()">选择菜单</button>
<script type="text/javascript">
function openMenu(){
$("#selectMenu").wBox({
title:"我的标题",
html:"<h3>huangbaokang你好</h3>", // 自定义弹出层html代码，注意特殊符号要转义
opacity:'0.8',// 遮罩层的透明度
timeout : "5000",//自动关闭的时间(毫秒)
});
}
</script>
</body>
</html>
弹窗如下：
支持的配置属性如下：
源码共245行代码，也比较简单，我学后端的都能看懂，其实就是Jquery插件的套路，从$.fn.插件名，定义了一个对象，代码从如下这里执行
_this.YQ.show?_this.showBox():$t.click(function(){
_this.showBox();
return false;
});
调用showBox()方法，
其他像拖拽drag，代码都是js控制，增加拖动开始事件，释放拖动鼠标事件等，其实就是一些js基础知识点啦。
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
