有时候 我们需要给用户点弹出提示 但是 直接使用alert好像有点不好看的样子 既然这样的话 我们就去调整下 稍微让它好看点哈 我下面的例子 是以 移动端为例子的
重写alert方法
// html 代码块
<div class="alert">
<div>
<p id="msg"></p>
</div>
</div>
// css 样式
<style>
*{
margin: 0;
padding: 0;
}
.alert{
width: 100vw;
height: 100vh;
position: absolute;
z-index: 1000;
background: rgba(0,0,0,.5);
display: none;
justify-content: center;
align-items: center;
}
.alert div{
color: #fff;
font-size: 2rem;
background-color: #000;
padding: 30px 20px;
border-radius: 10px;
}
</style>
// js代码块
<script>
window.alert=function(str){
var alert=document.querySelector('.alert');
var msg=document.querySelector('#msg');
alert.style.display="flex";
msg.innerHTML=str;
msg.classList.add('animate__animated');
msg.classList.add('animate__bounce');
setTimeout(function(){
alert.style.display="none";
},2000);
}
alert("今天是我的生日")
</script>
这里 我加了一个 animate.css的动画效果 让他稍微动起来好看点
下面的是动画cdn 链接