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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
原生js轮播特效
May 18 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
在小程序开发中使用npm的方法
Oct 17 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 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
用php来检测proxy
2006/10/09 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
js保留两位小数方法总结
2018/01/31 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python创建子类的方法分析
2019/11/28 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
新闻编辑求职信
2014/04/09 职场文书
天地会口号
2014/06/17 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2016小学新学期寄语
2015/12/04 职场文书