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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
webpack的移动端适配方案小结
Jul 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
取选中的radio的值
2010/01/11 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
解读Python中degrees()方法的使用
2015/05/18 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
计算机专业自我鉴定
2013/10/15 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
骨干教师培训方案
2014/05/06 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
2015年党性分析材料
2014/12/19 职场文书
满月酒邀请函
2015/01/30 职场文书
电视新闻稿
2015/07/17 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS