基于jquery的弹窗插件,主要有三个功能:
- 可以通过A标签的href属性弹出指定的内容
- 通过$(ele).jBox()直接弹出内容
- 通过$.jBox.show({content:"abc"})弹出自定义的内容
###示例及用法 弹出A标签指向的内容
<a href="#box1" class="test1" title="弹出A标签指向的DOM" data-rule="box">box1</a>
$(".test1").jBox();
直接弹出指定内容
$("#box2").jBox();
直接弹出自定义内容
var html='<input type="text" />';
html+='<p>这是自定义的内容</p>';
$.jBox.show({
title:"hello test",
content:html
});
关闭指定的窗口
在onOpen回调函数中会传入一个jQuery对象element
代表当前打开的窗口,通过$.jBox.close(ele)可以关闭指定的窗口
$(".test1").jBox({
onOpen:function(element){
$("#btn_box1").click(function(){
$.jBox.close(element);
});
}
});
重置窗口位置
这将重置页面上已打开的所有的窗口位置
$.jBox.reposition();
参数说明
参数 | 值的类型 | 描述 |
title | String | 标题 |
width | Number | 宽度 |
height | Number | 高度 |
minWidth | Number | 最小宽度 |
minHeight | Number | 最小高度 |
content | String | 内容 |
onOpen | Function | 窗体打开时执行的回调函数 |
onClosed | Function | 窗体关闭后执行的回调函数 |
btnOK ·text ·show ·extclass ·onBtnClick |
Object ·String ·Boolean ·String ·Boolean |
确定按钮参数 ·按钮的显示文字 ·是否显示按钮 ·按钮追加的样式 ·点击按钮的事件 |
btnCancel ·text ·show ·extclass ·onBtnClick |
Object ·String ·Boolean ·String ·Boolean |
取消按钮参数 ·按钮的显示文字 ·是否显示按钮 ·按钮追加的样式 ·点击按钮的事件 |