JS如何实现模态弹窗_JavaScript模态框弹窗实现与交互方法教程

<!-- 触发按钮 -->
<button id="openModal">打开弹窗</button>
<p><!-- 模态框容器 -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>提示</h2>
<p>这是一个模态弹窗示例。</p>
</div>
</div></p>

/* 隐藏默认 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
<p>/<em> 内容区域 </em>/
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border-radius: 8px;
width: 300px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
animation: modalFadeIn 0.3s ease-out;
}</p><p>/<em> 关闭按钮 </em>/
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #000;
}</p><p>/<em> 动画效果 </em>/
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}</p>

// 获取元素
const modal = document.getElementById('modal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.querySelector('.close');
<p>// 打开模态框
openBtn.onclick = function() {
modal.style.display = 'block';
}</p><p>// 关闭模态框
closeBtn.onclick = function() {
modal.style.display = 'none';
}</p><p>// 点击遮罩层关闭
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
}</p>

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && modal.style.display === 'block') {
    modal.style.display = 'none';
  }
});

openBtn.onclick = function() {
  modal.style.display = 'block';
  document.body.style.overflow = 'hidden'; // 锁定滚动
}
<p>closeBtn.onclick = function() {
modal.style.display = 'none';
document.body.style.overflow = ''; // 恢复滚动
}</p>