瀏覽器自帶的彈出框不好看哈,我們去把它改寫了 alert

有時候 我們需要給用戶點彈出提示 但是 直接使用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 鏈接