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调用XML制作连动下拉列表框
Jun 25 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
javascript Number 与 Math对象的介绍
Nov 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python socket编程实例详解
2015/05/27 Python
python异常和文件处理机制详解
2016/07/19 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python 含参构造函数实例详解
2017/05/25 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
详解python中docx库的安装过程
2019/11/08 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
业务部经理岗位职责
2014/01/04 职场文书
交通安全寄语大全
2014/04/08 职场文书
工作评语大全
2014/04/26 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
升学宴来宾致辞
2015/07/27 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL