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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
移动端界面的适配
2017/01/11 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
React优化子组件render的使用
2019/05/12 Javascript
详细介绍Python的鸭子类型
2016/09/12 Python
Python实现的归并排序算法示例
2017/11/21 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python3获取当前目录的实现方法
2019/07/29 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python编写计算器功能
2019/10/25 Python
Python中内建模块collections如何使用
2020/05/27 Python
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
农村产权制度改革实施方案
2014/03/21 职场文书
建筑管理专业求职信
2014/07/28 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
天气温馨提示语
2015/07/14 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
Python利用FlashText算法实现替换字符串
2022/03/31 Python