钟哥更改alert提示样式

.alert_box{position:fixed;top:46%;width:100%;z-index:1001;display:none;}
    .alert_box .alert_body{width:500px;margin:0 auto;background:#fff;text-align: center;border:1px solid #ddd;box-shadow: 0 2px 5px rgba(0,0,0,.3);border-radius: 4px;padding:10px 5px;font-size:1.8em;font-weight:bold;}

var Alert_Box = (function () {
            var box = null,lock=false, array = [];
            function Show(message) {
                if (box == null) {
                    box = $('');
                    $(document.body).append(box);
                }
                if (message == null) {
                    message = array.shift();
                    if (!message) { return;}
                } else if (lock) {
                    array.push(message);
                    return;
                }
                lock = true;
                box.find('.alert_body').html(message);
                box.slideDown('fast');
                setTimeout(Hide, 2000);
            }
            function Hide() {
                box.slideUp('fast', function () {
                    lock = false;
                    if (array.length > 0) {
                        Show(null);
                    }
                });

            }
            return Show;
        })();

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Alert_Box</title> <style type="text/css"> .alert_box{position:fixed;top:46%;width:100%;z-index:1001;display:none;} .alert_box .alert_body{width:500px;margin:0 auto;background:#fff;text-align: center;border:1px solid #ddd;box-shadow: 0 2px 5px rgba(0,0,0,.3);border-radius: 4px;padding:10px 5px;font-size:1.8em;font-weight:bold;} </style> </head> <body> <button onclick="Alert_Box('注册失败!')" >注册</button> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var Alert_Box = (function () { var box = null,lock=false, array = []; function Show(message) { if (box == null) { box = $('<div class="alert_box"><div class="alert_body"></div></div>'); $(document.body).append(box); } if (message == null) { message = array.shift(); if (!message) { return;} } else if (lock) { array.push(message); return; } lock = true; box.find('.alert_body').html(message); box.slideDown('fast'); setTimeout(Hide, 2000); } function Hide() { box.slideUp('fast', function () { lock = false; if (array.length > 0) { Show(null); } }); } return Show; })(); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 钟哥更改alert提示样式