HTML是一種標記語言，可以用來創建網頁。它可以實現許多功能，其中一個重要的功能是實現頁面遮罩彈出框。這個功能可以用來在網頁中彈出一個對話框，用于顯示信息、進行操作等。下面是一份HTML實現頁面遮罩彈出框的代碼：
首先，我們需要一個按鈕來觸發彈出框的顯示：
接下來，我們需要一個遮罩層來覆蓋整個頁面，使用戶無法點擊頁面上的其他區域。這可以通過CSS來實現：
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
</style>這段代碼定義了一個名為“overlay”的元素，它的位置固定在頁面的左上角，寬度和高度都為100%，背景為半透明的黑色。同時，它的z-index值設為9999，表示在其他元素之上。這個元素的默認顯示狀態為none，也就是隱藏狀態。
接下來，我們需要一個彈出框來顯示內容。這個彈出框應該在遮罩層之上，這可以通過CSS的z-index屬性來實現。彈出框的HTML代碼如下：
<div id="dialog"> <button onclick="hideDialog()">關閉彈出框</button> <p>這是彈出框中的內容。</p> </div>
這段代碼定義了一個名為“dialog”的元素，它包含一個按鈕和一段文本內容。默認狀態下，這個元素也是隱藏的。
現在我們需要一些JavaScript代碼來處理點擊按鈕時的事件，并顯示遮罩層和彈出框：
<script>
function showDialog() {
document.getElementById("overlay").style.display = "block";
document.getElementById("dialog").style.display = "block";
}
function hideDialog() {
document.getElementById("overlay").style.display = "none";
document.getElementById("dialog").style.display = "none";
}
</script>這段代碼定義了兩個函數：showDialog和hideDialog。showDialog函數用于顯示遮罩層和彈出框，hideDialog函數用于隱藏它們。這兩個函數會分別修改overlay和dialog元素的display屬性，將其顯示或隱藏。
現在，我們就完成了HTML實現頁面遮罩彈出框的代碼。它非常簡單，但效果非常實用。通過這種方式，可以在網頁中方便地顯示信息、進行用戶操作等。
下一篇c 獲取json的值