js alert(“”）弹框自定义样式

最新推荐文章于 2024-04-14 16:21:13 发布

转载最新推荐文章于 2024-04-14 16:21:13 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangjae/p/6611187.html

本文介绍如何使用CSS和JavaScript来创建一个自定义的alert通知框，通过固定定位显示在屏幕中间，并在两秒后自动消失。此方法提供了一个简单易用的通知提示方案。

首先用css渲染一个样式

#msg{
    height: 2rem;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -1rem;
    line-height: 2rem;
    width: 100%;
}
#msg span{
    color: #fff;
    background: rgba(0,0,0,0.6);
    height: 2rem;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 5px;
}

然后js匿名一个函数，用的时候就直接用alert事件就行了

function alert(e){
    $("body").append("<div id='msg'><span>"+e+"</span></div>");
    clearmsg();
}
function clearmsg(){
    var t = setTimeout(function(){
        $("#msg").remove();
    },2000)
};

转载于:https://www.cnblogs.com/wangjae/p/6611187.html