<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
    <script>
        $(function () {

            /**
             * 代替alert弹窗提示方法
             * @param width 弹窗div的宽
             * @param alertcontent 弹窗内容
             */
            function show_alert(width,alertcontent) {
                var boarddiv = "<div id='promptalert' style='width:200px;height: 30px;background-color: #fd4c5d;text-align: center;line-height: 30px;position: fixed;top:-30px;margin: 0 auto;z-index: 9999'><span class='alert-content' style='color: #FFFFFF;font-size: 14px;'>添加成功!</span></div>";
                $(document.body).append(boarddiv);  //生成显示的div
                var window_width = ($(window).width())/2; //页面宽度的50%
                var promptalert_width = ($("#promptalert").width())/2; //div宽度的50%
                var position_left = window_width - promptalert_width;  //position定位left的值,实现不管div多宽都水平居中

                $("#promptalert").css({"width":width});
                $("#promptalert").css({"left":position_left});
                $("#promptalert .alert-content").html(alertcontent);
                $("#promptalert").animate({
                    top:'15px'
                });
                setTimeout(function(){
                    $("#promptalert").animate({
                        top:'-30px'
                    });
                },2000);//3秒后执行该方法
            }


            $("a").click(function () {
                show_alert("300px","winter is coming  ╮( ̄▽ ̄)╭");
            });
        })
    </script>
</head>
<body>
    <a style="cursor: pointer">想了解更多</a>
</body>
</html>