自定义alert函数，替换alert_dialog小插件

最新推荐文章于 2018-01-26 10:17:42 发布

原创最新推荐文章于 2018-01-26 10:17:42 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 同时被 2 个专栏收录

17 篇文章

订阅专栏

自写小插件

4 篇文章

订阅专栏

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>aaa</title>
    <script src="http://www.dashi.cn//js/jquery1.7.2.js"></script>
</head>
<body>
    <style>
        *{margin:0;padding:0;}
        .fl{float:left;}
        /*.yx_alert{position:fixed;left:50%;top:50%;z-index:1001;max-width:500px;margin:0px auto 0;}*/
        .yx_alert{z-index:1001;position:fixed;top:0;left:0;width:100%;height:100%;text-align: center;}
        .clearfix{zoom:1;}
        .clearfix:after{visibility: hidden;display: block;font-size: 0;content:" ";clear: both;height:0;}
        .yx_alert .ico{display:inline-block;width:32px;height:32px;background: url(images/promptTip.png) -28px -200px no-repeat;overflow:hidden;margin-top:-3px;}
        .yx_alert .ico.error{background-position:-28px 0;}
        .yx_alert .ico.warning{background-position:-28px -120px;}
        .yx_alert .wrap{display:inline-block;background:#f2f2f2;overflow:hidden;max-width:350px;margin:0 auto;}
        .yx_alert .contBox{background:#fff;z-index:1;overflow:hidden;position: relative;z-index:1;margin:7px;display:inline-block;}
        .yx_alert .contBox .cont{margin:0 20px;padding:20px 0;}
        .yx_alert .content{padding:0 20px 0 50px;word-break:break-all;}
    </style>

    <input type="button" value="添加" />
    <script>



    $.extend({
        append_yx_alert:function(options){
                var defaults={type:'right',content:'操作有误!',txtAlign:'left',txtFontSize:'20px',time:1500};
                var opts=$.extend({},defaults,options);
                var str="<div class='yx_alert' id='yx_alert'>\n\
                    <div class='wrap clearfix'>\n\
                        <div class='contBox clearfix'>\n\
                            <div class='cont'>\n\
                                <i class='ico fl'></i>\n\
                                <div class='content'></div>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                </div>";
                $(function(){
                    $('#yx_alert').remove();
                    $(str).appendTo('body');
                }); 
                $("#yx_alert").ready(function () {
                    var iDiv_h=$('#yx_alert .wrap').outerHeight();
                    var iDoc_h=document.documentElement.clientHeight;
                    var h=(iDoc_h-iDiv_h)/2;
                    $('#yx_alert .wrap').css('marginTop',h+'px');
                    $('#yx_alert').find('.ico').addClass(opts.type).siblings('.content').html(opts.content).css({'textAlign':opts.txtAlign,'fontSize':opts.txtFontSize});
                }); 
                setTimeout(function(){
                    $('#yx_alert').remove();
                },opts.time);
        }
    });


    
   
    $(function(){
       
       $.append_yx_alert();
    }) 
    </script>

    <input type="button" id="btn" value="提交" onclick="$.append_yx_alert()" />

</body>
</html>