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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 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
自动分页的不完整解决方案
2007/01/12 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
nginx 设置多个站跨域
2021/03/09 Servers
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python之py2exe打包工具详解
2017/06/14 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
文化宣传方案
2014/03/13 职场文书
市场营销调查计划书
2014/05/02 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
个人存款证明书
2014/10/18 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书