修改系统默认 alert 弹框样式-蒲公英云

修改系统默认 alert 弹框样式

我就是我 2021-09-17 09:52 690阅读 0赞

修改默认 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>
window.alert =alert;
    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>