HTML 模态框
HTML 模態框
復制粘貼就能用
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>模態框</title><link rel="stylesheet" type="text/css" href="modalBox.css"> </head> <style>/*模態框*/ .modal {display: none; /* 默認隱藏 */position: fixed; /* 根據瀏覽器定位 */z-index: 1; /* 放在頂部 */left: 0;top: 0;width: 100%; /* 全寬 */height: 100%; /* 全高 */overflow: auto; /* 允許滾動 */background-color: rgba(0,0,0,0.4); /* 背景色 */ } /*模態框內容*/ .modal-content {display: flex; /*采用flexbox布局*/flex-direction: column; /*垂直排列*/position: relative;background-color: #fefefe;margin: 15% auto; /*距頂部15% 水平居中*/padding: 20px;border: 1px solid #888;width: 80%;animation: topDown 0.4s; /*自定義動畫，從模態框內容上到下出現*/ } @keyframes topDown {from {top: -300px; opacity: 0}to {top: 0; opacity: 1} } /*模態框頭部*/ .modal-header {display: flex; /*采用flexbox布局*/flex-direction: row; /*水平布局*/align-items: center; /*內容垂直居中*/justify-content: space-between; } /*關閉X 樣式*/ .close {color: #aaa;float: right;font-size: 28px;font-weight: bold; } .close:hover {color: black;text-decoration: none;cursor: pointer; } </style> <body><!-- 觸發按鈕 --><button id="triggerBtn">模態框</button><!-- 模態框 --><div id="myModal" class="modal"><div class="modal-content"><div class="modal-header"><h2>頭部</h2><span id="closeBtn" class="close">×</span></div><div class="modal-body"><p>這是一個模態框！</p><p>喜歡就點個贊吧！</p></div><div class="modal-footer"><h3>尾部</h3></div></div></div> <script type="text/javascript" src="modalBox.js"></script> </body> <script> (function() {/*建立模態框對象*/var modalBox = {};/*獲取模態框*/modalBox.modal = document.getElementById("myModal");/*獲得trigger按鈕*/modalBox.triggerBtn = document.getElementById("triggerBtn");/*獲得關閉按鈕*/modalBox.closeBtn = document.getElementById("closeBtn");/*模態框顯示*/modalBox.show = function() {console.log(this.modal);this.modal.style.display = "block";}/*模態框關閉*/modalBox.close = function() {this.modal.style.display = "none";}/*當用戶點擊模態框內容之外的區域，模態框也會關閉*/modalBox.outsideClick = function() {var modal = this.modal;window.onclick = function(event) {if(event.target == modal) {modal.style.display = "none";}}}/*模態框初始化*/modalBox.init = function() {var that = this;this.triggerBtn.onclick = function() {that.show();}this.closeBtn.onclick = function() {that.close();}this.outsideClick();}modalBox.init();})(); </script> </html>總結
- 上一篇： 1097: C语言程序设计教程（第三版）
- 下一篇： java/php/net/python幼