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 必知必会之closure
Sep 21 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
javascript的内存管理详解
Aug 07 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
ajax异步请求详解
Jan 06 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
Three.js实现简单3D房间布局
Dec 30 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中使用file_get_contents post数据代码例子
2015/02/13 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python类继承和多态原理解析
2020/02/05 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
python 如何快速复制序列
2020/09/07 Python
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
什么是网络协议
2016/04/07 面试题
党员公开承诺事项
2014/03/25 职场文书
党章培训心得体会
2014/09/04 职场文书
会计试用期自我评价
2014/09/19 职场文书
python如何获取网络数据
2021/04/11 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js