一、最简单的 JavaScript 弹窗代码实例
HTML代码
×弹窗中的文本...
CSS代码
/* 弹窗 (background) */.modal {display: none; /* 默认隐藏 */position: fixed; /* 固定定位 */z-index: 1; /* 设置在顶层 */left: 0;top: 0;width: 100%; height: 100%;overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } /* 弹窗内容 */.modal-content {background-color: #fefefe;margin: 15% auto; padding: 20px;border: 1px solid #888;width: 80%; } /* 关闭按钮 */.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;} .close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}JS代码
// 获取弹窗var modal = document.getElementById('myModal'); // 打开弹窗的按钮对象var btn = document.getElementById("myBtn"); // 获取 元素，用于关闭弹窗var span = document.querySelector('.close'); // 点击按钮打开弹窗btn.onclick = function() {modal.style.display = "block";} // 点击 (x), 关闭弹窗span.onclick = function() {modal.style.display = "none";} // 在用户点击其他地方时，关闭弹窗window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}展示效果
二、弹窗添加头部和底部
HTML代码
×弹窗头部
弹窗文本...
弹窗文本...
弹窗底部
CSS代码
/* 弹窗 (background) */.modal {display: none; /* 默认隐藏 */position: fixed; z-index: 1; padding-top: 100px; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);} /* 弹窗内容 */.modal-content {position: relative;background-color: #fefefe;margin: auto;padding: 0;border: 1px solid #888;width: 80%;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s} /* 添加动画 */@-webkit-keyframes animatetop {from {top:-300px; opacity:0} to {top:0; opacity:1}} @keyframes animatetop {from {top:-300px; opacity:0}to {top:0; opacity:1}} /* 关闭按钮 */.close {color: white;float: right;font-size: 28px;font-weight: bold;} .close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;} .modal-header {padding: 2px 16px;background-color: #5cb85c;color: white;} .modal-body {padding: 2px 16px;} .modal-footer {padding: 2px 16px;background-color: #5cb85c;color: white;}JS代码（JS代码一般用作弹窗的开关，功能点和普通弹窗相同）
// 获取弹窗var modal = document.getElementById('myModal');// 打开弹窗的按钮对象var btn = document.getElementById("myBtn");// 获取 元素，用于关闭弹窗 that closes the modalvar span = document.getElementsByClassName("close")[0];// 点击按钮打开弹窗btn.onclick = function() {modal.style.display = "block";}// 点击 (x), 关闭弹窗span.onclick = function() {modal.style.display = "none";}// 在用户点击其他地方时，关闭弹窗window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}展示效果
三、在底部显示的弹窗
HTML代码
×弹窗头部
弹窗文本...
弹窗文本...
弹窗底部
CSS代码
/* 弹窗 */.modal {display: none; /* 默认隐藏 */position: fixed; z-index: 1; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.4s;animation-name: fadeIn;animation-duration: 0.4s}/* 弹窗内容 */.modal-content {position: fixed;bottom: 0;background-color: #fefefe;width: 100%;-webkit-animation-name: slideIn;-webkit-animation-duration: 0.4s;animation-name: slideIn;animation-duration: 0.4s}/* 关闭按钮 */.close {color: white;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}.modal-header {padding: 2px 16px;background-color: #5cb85c;color: white;}.modal-body {padding: 2px 16px;}.modal-footer {padding: 2px 16px;background-color: #5cb85c;color: white;}/* 添加动画 */@-webkit-keyframes slideIn {from {bottom: -300px; opacity: 0} to {bottom: 0; opacity: 1}}@keyframes slideIn {from {bottom: -300px; opacity: 0}to {bottom: 0; opacity: 1}}@-webkit-keyframes fadeIn {from {opacity: 0} to {opacity: 1}}@keyframes fadeIn {from {opacity: 0} to {opacity: 1}}JS代码
// 获取弹窗var modal = document.getElementById('myModal');// 打开弹窗的按钮对象var btn = document.getElementById("myBtn");// 获取 元素，用于关闭弹窗 that closes the modalvar span = document.getElementsByClassName("close")[0];// 点击按钮打开弹窗btn.onclick = function() {modal.style.display = "block";}// 点击 (x), 关闭弹窗span.onclick = function() {modal.style.display = "none";}// 在用户点击其他地方时，关闭弹窗window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}展示效果
第一次写文章，不会导入视频，效果啥的以实际代码运行效果为准