1. 程式人生 > >修改系統預設 alert 彈框樣式

修改系統預設 alert 彈框樣式

修改預設 alert 彈框,思路很簡單,定義一個 alert(e) 函式,載入最開頭即可。

css部分:

<style>
    #msg{
        width:266px;
        position: fixed;
        z-index:999;
        top: 49%;
        margin-top:-80px;
        left:50%;
        margin-left:-133px;
        background:#fff;
        box-shadow:5px 5px 8px #999;
        font-size:17px;
        color:#666;
        border:1px solid #f8f8f8;
        text-align: center;
        line-height: 2rem;
        display:inline-block;
        padding-bottom:20px;
        border-radius:2px;
    }
    #msg_top{
        background:#f8f8f8;
        padding:5px 15px 5px 20px;
        text-align:left;
    }
    #msg_top span{
        font-size:22px;
        float:right;
        cursor:pointer;
    }
    #msg_cont{
        padding:15px 20px 20px;
        text-align:left;
    }
    #msg_clear{
        display:inline-block;
        color:#fff;
        padding:1px 15px;
        background:#8fc31f;
        border-radius:2px;
        float:right;
        margin-right:15px;
        cursor:pointer;
    }
</style>

因為彈框是通過js後期加入的,所以高寬是無法通過js獲取的,所以要讓彈框居中在視窗中要自己定義一下寬度;或者最外層包一個width:100% 的塊,讓彈框在這個塊中居中

js部分:

<script>
    function alert(e){
        $("body").append('<div id="msg"><div id="msg_top">資訊<span class="msg_close">×</span></div><div id="msg_cont">'+e+'</div><div class="msg_close" id="msg_clear">確定</div></div>');
        $(".msg_close").click(function (){
            $("#msg").remove();
        });
    }
</script>