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的图片大小自动适应实现代码
Nov 17 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
小程序实现筛子抽奖
May 26 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实现MySQL更新记录的代码
2008/06/07 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
JS动态创建DOM元素的方法
2015/06/09 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python3.x上post发送json数据
2018/03/04 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python分布式编程实现过程解析
2019/11/08 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
python3 使用traceback定位异常实例
2020/03/09 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
css3 transform属性详解
2014/09/30 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
体育教学随笔感言
2014/02/24 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
教师节倡议书
2014/08/30 职场文书
班主任工作实习计划
2015/01/16 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏