修改系统默认 alert 弹框样式

最新推荐文章于 2023-02-15 10:00:57 发布

转载最新推荐文章于 2023-02-15 10:00:57 发布 · 3.5k 阅读

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现自定义alert提示框的方法。通过简单的函数封装，可以创建美观且可定制的提示框，同时提供了相应的样式代码以确保良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：https://blog.youkuaiyun.com/sun124608666/article/details/72866735

1、封装重写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();
    });
}

2、样式代码：

#msg{
    width:375px;
    height: 220px;
    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:5px;
}
#msg_top{
    background:#30a2eb;
    padding:5px 15px 5px 20px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
}
#msg_top span{
    font-size:22px;
    float:right;
    cursor:pointer;
}
#msg_cont{
    padding:45px 20px 50px;
    color: #676767;
    font-size: 20px;
}
#msg_clear{
    width: 110px;
    height: 35px;
    display:inline-block;
    color:#fff;
    padding:1px 15px;
    background:#30a2eb;
    border-radius:2px;
    margin-right:15px;
    line-height: 35px;
    cursor:pointer;
}