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

来源：互联网发布：mac 使用oracle 编辑：程序博客网时间：2024/06/06 09:39
<!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>
0 0