以下是一个简单的 JavaScript 弹窗代码实例。
HTML 代码：
<!-- 打开弹窗按钮 --><button id="myBtn">打开弹窗</button> <!-- 弹窗 --><div id="myModal" class="modal"> <!-- 弹窗内容 --> <div class="modal-content"> <span class="close">×</span> <p>弹窗中的文本...</p> </div> </div>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;}JavaScript 代码：
// 获取弹窗var modal = document.getElementById('myModal'); // 打开弹窗的按钮对象var btn = document.getElementById("myBtn"); // 获取 <span> 元素，用于关闭弹窗var span = document.querySelector('.close'); // 点击按钮打开弹窗btn.onclick = function() { modal.style.display = "block";} // 点击 <span> (x), 关闭弹窗span.onclick = function() { modal.style.display = "none";} // 在用户点击其他地方时，关闭弹窗window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }}在线演示
弹窗添加头部和底部
HTML 代码：
<!-- 打开弹窗按钮 --><button id="myBtn">打开弹窗</button> <!-- 弹窗 --><div id="myModal" class="modal"> <!-- 弹窗内容 --> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>弹窗头部</h2> </div> <div class="modal-body"> <p>弹窗文本...</p> <p>弹窗文本...</p> </div> <div class="modal-footer"> <h3>弹窗底部</h3> </div> </div> </div>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;}在线演示
在底部显示的弹窗