思路:
•創建一個蒙板, 設置蒙板的堆疊順序保證能將其它元素蓋住
position: absolute;top: 0;left: 0;display: none;background-color: rgba(9, 9, 9, 0.63);width: 100%;height: 100%;z-index: 1000; •設置蒙板中內容的背景色和展示格式width: 50%;text-align: center;background: #ffffff;border-radius: 6px;margin: 100px auto;line-height: 30px;z-index: 10001; •綁定事件, 動態切換蒙板的display 屬性function showModel() {document.getElementById('myModel').style.display = 'block';}function closeModel() {document.getElementById('myModel').style.display = 'none';}注意事項: 蒙板要採用絕對定位, 寬和高要佔整個頁面, 堆疊順序要大
原始碼
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>蒙板</title><style>.container {width: 900px;margin: 50px auto;text-align: center;}#myModel {position: absolute;top: 0;left: 0;display: none;background-color: rgba(9, 9, 9, 0.63);width: 100%;height: 100%;z-index: 1000;}.model-content {width: 50%;text-align: center;background: #ffffff;border-radius: 6px;margin: 100px auto;line-height: 30px;z-index: 10001;}</style></head><body><div><button onclick="showModel()">彈出蒙板</button><div id="myModel" onclick="closeModel()"><div><p>你好啊,我是內容~~</p><p><button id="closeModel" onclick="closeModel()">關閉</button></p></div></div></div><script>function showModel() {document.getElementById('myModel').style.display = 'block';}function closeModel() {document.getElementById('myModel').style.display = 'none';}</script></body></html>以上所述是小編給大家介紹的JavaScript蒙板(model)功能的簡單實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！