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 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
jQuery中的select操作详解
Nov 29 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue实现记事本功能
Jun 26 Javascript
JS中封装axios来管控api的2种方式
Sep 11 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获取金书网的书名的实现代码
2010/06/11 PHP
PHP多例模式介绍
2013/06/24 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python实现超市商品销售管理系统
2019/10/25 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
运动会广播稿20字
2014/02/18 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
安全教育观后感
2015/06/17 职场文书
新员工入职感想
2015/08/07 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电