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


Posted in Javascript onMarch 02, 2014
<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="<div id='mask_layer'></div><div id='scs_alert'><div id='alert_top'></div><div id='alert_bg'><table width='260' align='center' border='0' cellspacing='0' cellpadding='1'><tr>";
    if (sign!="")s+="<td width='45'><div id='inco_"+sign+"'></div></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+="</div><div id='alert_foot'></div></div>";
    $("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>
Javascript 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
js+css3实现旋转效果
Jan 20 Javascript
js逆向解密之网络爬虫
May 30 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 #Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 #Javascript
jquery获取当前点击对象的value方法
Feb 28 #Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 #Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 #Javascript
如何设置一定时间内只能发送一次请求
Feb 28 #Javascript
js中settimeout方法加参数
Feb 28 #Javascript
You might like
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JS中数据结构之栈
2019/01/01 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python实现弹球小游戏
2020/08/01 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
中科创达面试题
2016/12/28 面试题
面试后的感谢信范文
2014/02/01 职场文书
教师节促销方案
2014/03/22 职场文书
音乐节策划方案
2014/06/09 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
医院病假条范文
2015/08/17 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript