弹出对话框

最新推荐文章于 2024-05-17 08:49:28 发布

shikun520

最新推荐文章于 2024-05-17 08:49:28 发布

阅读量145

点赞数

分类专栏： Javascript 文章标签：弹出对话框

本文链接：https://blog.csdn.net/shikun520/article/details/84282332

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../jquery/js/jquery-1.7.2.js" type="text/javascript"></script>
     <link rel="stylesheet"  href="css/myAlert.css" type="text/css" />
    <script type="text/javascript" src="js/myAlert.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#t").click(function(){
                sAlert({"msg":"这是我的确认对话框","left":"40%","top":"30%","title":"确认对话框","animate":"show"});
            });
            $("#aDel").click(function(){
                sConfirm({"msg":"确定要删除吗","left":"30%","top":"30%","title":"删除对话框","animate":"show",callback:function(){
                    sAlert({"msg":"删除成功","left":"30%","top":"30%","title":"确认对话框"});
                }});
            });
        });
    </script>
    <style type="text/css">

    </style>
    <title></title>

</head>
<body>
<div style="width: 1004px; margin: 0 auto;">

    <a href="#" id="t">确认</a>
    <a href="#" id="aDel">删除</a>
   </div>
</body>
</html>

(function($){

/*
* sAlert({"left":"30%",top:"30%",,msg:"没有登陆"})
* sConfirm({"left":"30%",top:"30%",,msg:"没有登陆",callback:function(){这里是回调函数}})
* */
    $.alerts={
        _show:function(options,type){
            var defaults={
                left:"30%",//对话框左距离 30%
                top:"30%", //对话框顶距离
                title:"提示对话框",//标题
                msg:"",//提示信息，必填
                animate:"fade",//弹出效果，现在只支持fade和普通的show hide,参数为fade,或show
                callback:""
            };
            var opts= $.extend(defaults,options);
            var winwidth=$(document).outerWidth();
            var winheight=$(document).outerHeight();
            var div='<div id="windownbg"></div>'
            $(div).prependTo("body");
            $("#windownbg").css({width:winwidth+"px",height:winheight+"px",filter:"alpha(opacity=40)",opacity:"0.5","background-color": "#000000",position: "absolute", top: "0px", left: "0px"});
            switch(type){
                case "alert":
                    var alert="<div  id='alert'><div class='closeImg'><img src='images/close1.png' alt=''></div><div id='alertTitle'></div><div id='alertMsg'></div><div id='btnAlert'>确 认 </div></div>";
                    $("body").append(alert);
//                    if(!opts.left){ //指定默认值
//                        opts.left=(winwidth-$("#alert").width())/2+"px";
//                    }
//                    if(!opts.top){
//                        opts.top=(winheight-$("#alert").height())/2+"px";
//                    }
                    $("#alert").css({"left": opts.left,"z-index":101,"top": opts.top});
                    $("#alertMsg").text(opts.msg);
                    $("#alertTitle").text(opts.title);
                    switch(opts.animate){
                        case "fade":
                            $("#alert").fadeIn();
                         break;
                        case "show":
                            $("#alert").show();
                         break;
                    }
                    $("#btnAlert").click(function(){
                         $.alerts._hide("alert",opts.animate);
                     });
                    $(".closeImg").click(function(){
                        $.alerts._hide("alert",opts.animate);
                    });
                    break;
                case "confirm":
                    var confirm="<div  id='confirm'><div class='closeImg'><img src='images/close1.png' alt=''></div><div id='confirmTitle'></div><div id='confirmMsg'></div><div id='btnConfirm'>确定</div><div id='ConfirmCancel'>取消 </div></div>";

                    $("body").append(confirm);

                    $("#confirmMsg").text(opts.msg);
                    $("#confirmTitle").text(opts.title);
//                    if(!opts.left){
//                        opts.left=(winwidth-$("#alert").width())/2+"px";
//                    }
//                    if(!opts.top){
//                        opts.top=(winheight-$("#alert").height())/2+"px";
//                    }
                    $("#confirm").css({"left":opts.left,"z-index":101,"top":opts.top});
                    switch(opts.animate){
                        case "fade":
                            $("#confirm").fadeIn();
                            break;
                        case "show":
                            $("#confirm").show();
                            break;
                    }
                    $("#ConfirmCancel").click(function(){
                        $.alerts._hide("confirm",opts.animate);
                    });
                    $("#btnConfirm").click(function(result){
                        if ($.isFunction(opts.callback)) {
                            opts.callback(result);
                        }
                        $.alerts._hide("confirm",opts.animate);
                    });
                    $(".closeImg").click(function(){
                        $.alerts._hide("confirm",opts.animate);
                    });

            }
        },
        _hide:function(type,animate){
            switch(type){
                case "alert":
                    $("#windownbg").remove();
                    switch(animate){
                        case "fade":
                            $("#alert").fadeOut();
                         break
                        case "show":
                            $("#alert").hide();
                         break;
                    }
                 break;
                case "confirm":
                    $("#windownbg").remove();
                    switch(animate){
                        case "fade":
                            $("#confirm").fadeOut();
                            break
                        case "show":
                            $("#confirm").hide();
                            break;
                    }
                 break;
            }
        },
        alert:function(option,type){
            $.alerts._show(option,type);
        },
        confirm:function(option,type){
            $.alerts._show(option,type);
        }
    }
    sAlert=function(option){
        $.alerts.alert(option,"alert");
    },
    sConfirm=function(option){
        $.alerts.confirm(option,"confirm");
    }
})(jQuery);