点击按钮弹出模态图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模态框</title> <link rel="stylesheet" type="text/css" href="modalBox.css"> </head> <body> <!-- 触发按钮 --> <button id="triggerBtn">模态框</button> <!-- 模态框 --> <div id="myModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span id="closeBtn" class="close">×</span> </div> <div class="modal-body"> <p>内容</p> </div> <div class="modal-footer"> </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>
/*模态框*/ .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; }