HTML彈窗是網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的一個(gè)交互效果，可以通過(guò)點(diǎn)擊按鈕來(lái)觸發(fā)彈窗的顯示，下面給大家分享一個(gè)常見(jiàn)的HTML彈窗加按鈕的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML彈窗加按鈕代碼演示</title>
<style>
/* 彈窗樣式 */
#dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 300px;
padding: 20px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: none;
}
/* 按鈕樣式 */
.btn {
display: inline-block;
padding: 5px 10px;
background-color: #333;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn" onclick="showDialog()">點(diǎn)擊彈出彈窗</button>
<div id="dialog">
<h2>這是一個(gè)彈窗</h2>
<p>這里可以放置彈窗內(nèi)容</p>
<button class="btn" onclick="hideDialog()">關(guān)閉彈窗</button>
</div>
<script>
var dialog = document.getElementById("dialog");
function showDialog() {
dialog.style.display = "block";
}
function hideDialog() {
dialog.style.display = "none";
}
</script>
</body>
</html>在上面的代碼中，首先定義了樣式，包括彈窗和按鈕的樣式，彈窗使用了固定定位，居中顯示在屏幕上，初始為隱藏狀態(tài)，通過(guò)display屬性來(lái)控制顯示或隱藏；按鈕使用了內(nèi)聯(lián)塊元素，添加了點(diǎn)擊事件，點(diǎn)擊按鈕后觸發(fā)showDialog()函數(shù)，使彈窗顯示出來(lái)，在彈窗中也添加了一個(gè)按鈕，點(diǎn)擊后觸發(fā)hideDialog()函數(shù)，將彈窗隱藏起來(lái)。
上一篇html并列排版代碼