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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
微信小程序实现底部弹出框
Nov 18 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中用文本文件做数据库的实现方法
2008/03/27 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
json 定义
2008/06/10 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
javascript json2 使用方法
2010/03/16 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
Vue表单实例代码
2016/09/05 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
js实现动态时钟
2020/03/12 Javascript
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python包和模块的分发详细介绍
2020/06/19 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
高中历史教学反思
2014/02/08 职场文书
优秀学生获奖感言
2014/02/15 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年加油站工作总结
2015/05/13 职场文书