您的位置
主页 > 网站技术 > 语言编程 > » 正文

分享jquery制作弹窗提示窗口代码

来源: 站长圈 点击:

点评:jquery制作的弹窗提示窗口插件,包含多种模式。带有回执函数值的功能,需要的朋友可以参考下,希望对大家有所帮助!

复制代码 代码如下:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<!--[if IE 6]>

<script type="text/javascript" src="js/iepngfix_tilebg.js"></script>

<![endif]-->

<script type="text/javascript">

function position(elem,l,t){

    var isIE6 = !-[1,] && !window.XMLHttpRequest;

    if(isIE6){

        var style = elem.style,

        dom  = '(document.documentElement)',

        left = l - document.documentElement.scrollLeft,

        top  = t - document.documentElement.scrollTop;

        style.position = 'absolute';

        style.removeExpression('left');

        style.removeExpression('top');

        style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');

        style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');

    }else{

        elem.style.position = 'fixed';

    }

}      

function scscms_alert(msg,sign,ok,can){

    var c_=false;//是否已经关闭窗口,解决自动关闭与手动关闭冲突

    sign=sign||"";

    var s="<p id='mask_layer'></p><p id='scs_alert'><p id='alert_top'></p><p id='alert_bg'><table width='260' align='center' border='0' cellspacing='0' cellpadding='1'><tr>";

    if (sign!="")s+="<td width='45'><p id='inco_"+sign+"'></p></td>";

    s+="<td id='alert_txt'>"+msg+"</td></tr></table>";

    if (sign=="confirm"){

        s+="<a href='javascript:void(0)' id='confirm_ok'>确 定</a><a href='javascript:void(0)' id='confirm_cancel'>取 消</a>";

    }else{

        s+="<a href='javascript:void(0)' id='alert_ok'>确 定</a>"

    }

    s+="</p><p id='alert_foot'></p></p>";

    $("body").append(s);

    $("#scs_alert").css("margin-top",-($("#scs_alert").height()/2)+"px"); //使其垂直居中

    $("#scs_alert").focus(); //获取焦点,以防回车后无法触发函数

    position(document.getElementById('mask_layer'),0,0);

    position(document.getElementById('scs_alert'),$(window).width()/2,$(window).height()/2);

    if (typeof can == "number"){

    //定时关闭提示

        setTimeout(function(){

            close_info();

        },can*1000);

    }

    function close_info(){

    //关闭提示窗口

        if(!c_){

        $("#mask_layer").fadeOut("fast",function(){

            $("#scs_alert").remove();

            $(this).remove();

        });

        c_=true;

        }

    }

    $("#alert_ok").click(function(){

        close_info();

        if(typeof(ok)=="function")ok();

    });

    $("#confirm_ok").click(function(){

        close_info();

        if(typeof(ok)=="function")ok();

    });

    $("#confirm_cancel").click(function(){

        close_info();

        if(typeof(can)=="function")can();

    });

    function modal_key(e){

        e = e||event;

        close_info();

        var code = e.which||event.keyCode;

        if (code == 13 || code == 32){if(typeof(ok)=="function")ok()}

        if (code == 27){if(typeof(can)=="function")can()}       

    }

    //绑定回车与ESC键

    if (document.attachEvent)

        document.attachEvent("onkeydown", modal_key);

    else

        document.addEventListener("keydown", modal_key, true);

}

//====================================以下为测试函数=======================================//

function test1(){

    scscms_alert("默认提示信息");

}

function test2(){

    scscms_alert("成功提示信息","ok");

}

function test3(){

    scscms_alert("成功提示后回调函数","ok",function(){alert("回调成功!")});

}

function test4(){

    scscms_alert("失败提示信息","error");

}

function test5(){

    scscms_alert("失败提示信息","error",function(){alert("哦!no!")});

}

function test6(){

    scscms_alert("警告提示信息","warn");

}

function test7(){

    scscms_alert("警告提示信息","warn",function(){alert("哦!警告!")});

}

function test8(){

    scscms_alert("您喜欢此信息提示吗?","confirm",function(){

        scscms_alert("您选择了喜欢,谢谢!","ok");

    },function(){

        scscms_alert("您选择了不喜欢,汗!","error");

    });

}

function test9(){

    scscms_alert("本信息3秒后自动关闭","ok","",3);

}

function test10(){

    scscms_alert("询问信息定时关闭提示信息,3秒后自动关闭,无取消时回调函数.不推荐使用。","confirm",function(){alert("确定回调用!")},3);

}

</script>




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明