jQuery zxxbox弹出框插件(v3.0)测试页面 » 张鑫旭-鑫空间-鑫生活

一、内置弹框

显示最简单的内置的信息确定提示框：

JS代码：

$("#test1").click(function(){ $.zxxbox.remind("你已成功受邀参加威尼斯电影节。"); });

带回调函数的信息确认提示框：

JS代码：

$("#test2").click(function(){ $.zxxbox.remind('美国驻沪领事馆权威发布：上半年<a href="#nogo" title="上海">上海</a>赴美留学3.2万人。', function(){ alert("哇哈哈，这是回调函数显示的内容：今年上海的学生签证通过率达到了95%。去年这一数字为90%。"); }, { title: "参考消息" }); });

显示内置的询问提示框：

JS代码：

$("#test3").click(function(){ $.zxxbox.ask("确认改变页面的背景色为天蓝色", function(){ $("body").css("background-color", "azure"); $.zxxbox.hide(); }, null, { title: "友情提示" }); });

二、装载页面上的元素

加载页面上一段登录的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代码：

<a href="#" class="ml10 mr10" id="test6">点击我-被装载到弹框</a>

JS代码：

$("#test6").click(function(){
    $(this).zxxbox({
        ajaxTagA: false,
        height: 80   
    });
    return false;
});

三、Ajax装载页面外的元素

a标签链接地址加载之图片：点击我-显示美女图片

HTML代码：

<a id="test7" target="_blank" href="//image.zhangxinxu.com/image/study/s/s512/mm19.jpg">点击我-显示美女图片</a>

JS代码：

$("#test7").zxxbox({
    bar: false,
    bgclose: true
});

a标签之加载静态页面：点击我-加载HTML静态页

HTML代码：

<a id="test8" href="html-load.html">点击我-加载HTML静态页</a>

JS代码：

$("#test8").zxxbox();

直接使用zxxbox的ajax方法加载外部数据：

JS代码：

$("#test9").click(function(){
    $.zxxbox.ajax("php-load.php");						   
});

四、zxxbox一些参数使用举例

不显示半透明背景层：

JS代码：

$("#test10").click(function(){ $.zxxbox('<div class="wrap_remind">最近貌似《盗梦空间》很热啊！</div>', { 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;
            }
    });					
});

五、一些复杂情况使用举例

弹框高度会动态增加：

$("#test16").click(function(){ var elements = $('<div style="width:400px; padding:20px; display:none;">与70后相比，即将步入30岁的80后大多工作还不够稳定，房子、车子似乎也是很遥远的事情，而且，这其中还有为数可观的大龄青年。在变革的社会中成长起来的80后承担着更多来自现实和心理上的双重压力。迈入而立之年的80后，自己的前方在哪里？自己又能因何而立？<br /><a id="showRelElement" href="javascript:void(0);" rel="beRelElement">显示更多>></a><div id="beRelElement" class="mt10 dn">恐怕，就连孔子也不会想到，2000多年前组合出的4个字——“三十而立”，如今会因为一个叫“80后”的群体，再度引发国人的集体思考。<br /><br />三十而立，那么，何为“立”？最通俗惯常的说法，30岁应该成家立业，有所作为。而最低的要求则是30岁的人应该能依靠自己的本领，独立承担责任，并已确定自己的人生目标与发展方向。</div></div>'); $.zxxbox(elements, { onshow: function() { protect: false, $("#showRelElement").click(function() { var rel = $(this).attr("rel"); if (rel) { $("#"+rel).slideDown(function() { $.zxxbox.setPosition(true); }); $(this).hide(); } return false; }); } }); });

多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();
};