一、内置弹框显示最简单的内置的信息确定提示框: 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代码:$("#test6").click(function(){ $(this).zxxbox({ ajaxTagA: false, height: 80 }); return false; }); 三、Ajax装载页面外的元素a标签链接地址加载之图片:点击我-显示美女图片 HTML代码:
JS代码:$("#test7").zxxbox({ bar: false, bgclose: true }); 直接使用zxxbox的ajax方法加载外部数据: JS代码:$("#test9").click(function(){ $.zxxbox.ajax("php-load.php"); }); 四、zxxbox一些参数使用举例不显示半透明背景层: JS代码:最近貌似《盗梦空间》很热啊! ', {
bg: false
});
});不显示标题栏的关闭按钮: 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; } }); }); 五、一些复杂情况使用举例弹框高度会动态增加: 加载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() |
|