演示地址:http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html#
一、内置弹框
显示最简单的内置的信息确定提示框：
JS代码：
带回调函数的信息确认提示框：
JS代码：
显示内置的询问提示框：
JS代码：
二、装载页面上的元素
加载页面上一段登录的HTML：
HTML代码：
JS代码：
$("#test4").click(function(){ $("#login").zxxbox(); //或者是$.zxxbox($("#login")); });
$("#loginBtn").click(function(){ /*
*
一些登录操作
*
*/ alert("登录成功！");
$.zxxbox.hide();
});
$("#cancelBtn").click(function(){
$.zxxbox.hide();
});
使用a标签的锚点加载页面元素：点击我-登录
HTML代码：
JS代码：
$("#test5").zxxbox();
a标签本身作为元素被加载：点击我-被装载到弹框
HTML代码：
JS代码：
$("#test6").click(function(){
$(this).zxxbox({
ajaxTagA: false,
height: 80
});
return false;
});
三、Ajax装载页面外的元素
a标签链接地址加载之图片：点击我-显示美女图片
HTML代码：
JS代码：
$("#test7").zxxbox({
bar: false,
bgclose: true
});
a标签之加载静态页面：点击我-加载HTML静态页
HTML代码：
JS代码：
$("#test8").zxxbox();
直接使用zxxbox的ajax方法加载外部数据：
JS代码：
$("#test9").click(function(){
$.zxxbox.ajax("php-load.php");
});
四、zxxbox一些参数使用举例
不显示半透明背景层：
JS代码：
不显示标题栏的关闭按钮：
JS代码：
$("#test11").click(function(){
$.zxxbox.remind("外滩，一对恋人，女撒娇道:亲爱的，听说过一阵要上映一个特别浪漫的电影，狄仁杰与山楂树之恋...",
function(){ //$(this)指代当前弹框的确定按钮jQuery对象
//禁用确定按钮 $(this).attr("disabled", "disabled");
}, {
btnclose: false
});
});
弹框可拖拽：
JS代码：
$("#test12").click(function(){
$.zxxbox.remind("点击按住标题栏可以进行拖拽~~", null, { drag: true });
});
弹框位置不随滚动条滚动（IE6有晃动）：
JS代码：
$("#test13").click(function(){
$.zxxbox.remind("弹框的位置游离于滚动条之外~~", null, { fix: true });
});
弹窗打开后定时关闭：
JS代码：
$("#test14").click(function(){
$.zxxbox.remind("此弹框将在3秒钟后关闭，现在倒计时3,2,1...", null, { delay: 3000 });
});
弹窗关闭后触发回调方法：
JS代码：
$("#test15").click(function(){
$.zxxbox.remind(
"此弹窗关闭后，页面会刷新~~",
null,
{
onclose: function(){
window.location.href=window.location.href;
}
});
});
五、一些复杂情况使用举例
弹框高度会动态增加：
多a标签加载外部元素（如图片）： 加载图片1 加载图片2 加载图片3
HTML代码：
JS代码：
$(".loadImage").zxxbox({
bar: false,
bgclose:true
});
加载iframe并通过iframe内元素关闭弹框：
父页面HTML代码(隐藏的按钮)：
JS代码：
$("#test17").click(function(){
$.zxxbox($('<iframe frameborder="0" width="400" height="200" src="iframe-load.html"></iframe>'));
});
$("#forTriggerHide").click(function(){
$.zxxbox.hide();
});
iframe框架页面相关HTML代码：
JS代码：
document.getElementById("iframeBtn").onclick = function(){
parent.document.getElementById("forTriggerHide").click();
};