HTML彈窗祝福源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML彈窗祝福</title>
<style>
.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 9999;
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
width: 400px;
padding: 20px;
text-align: center;
z-index: 10000;
}
.popup h2 {
font-size: 24px;
margin-bottom: 20px;
}
.popup img {
width: 100%;
max-width: 200px;
margin-bottom: 20px;
}
.popup button {
background-color: #c1292e;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#" onclick="openPopup()">點擊這里送出祝福</a>
<div class="popup-overlay"></div>
<div class="popup">
<h2>送你一份祝福</h2>
<img src="https://via.placeholder.com/150" alt="祝福圖片">
<p>祝福語：祝你xxxx。</p>
<button onclick="closePopup()">關閉</button>
</div>
<script>
function openPopup() {
document.querySelector('.popup-overlay').style.display = 'block';
document.querySelector('.popup').style.display = 'block';
}
function closePopup() {
document.querySelector('.popup-overlay').style.display = 'none';
document.querySelector('.popup').style.display = 'none';
}
</script>
</body>
</html>上一篇vue cdn模式