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 相关文章推荐
使用javascipt---实现二分查找法
Apr 10 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
js调用刷新界面的几种方式
May 03 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
原生js生成图片验证码
2020/10/11 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python pandas模块基础学习详解
2019/07/03 Python
200行python代码实现2048游戏
2019/07/17 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
天游软件面试
2013/11/23 面试题
青年志愿者活动总结
2014/04/26 职场文书
教研处工作方案
2014/05/26 职场文书
催款函怎么写
2015/06/24 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
linux目录管理方法介绍
2022/06/01 Servers