如何添加jQuery或JavaScript点击函数实现点击触发弹窗打开功能

效果示意图 #

#

1. 基础HTML结构 #

给菜单项添加自定义属性关联对应弹窗，弹窗默认设置为隐藏状态：

<!-- 菜单项列表 -->
<ul class="menu-list">
  <li class="menu-item" data-popup-target="popup1">菜单项1</li>
  <li class="menu-item" data-popup-target="popup2">菜单项2</li>
  <li class="menu-item" data-popup-target="popup3">菜单项3</li>
</ul>

<!-- 弹窗容器 -->
<div class="popup" id="popup1">
  <div class="popup-content">
    <span class="close-btn">×</span>
    <p>菜单项1对应弹窗内容</p>
  </div>
</div>
<div class="popup" id="popup2">
  <div class="popup-content">
    <span class="close-btn">×</span>
    <p>菜单项2对应弹窗内容</p>
  </div>
</div>
<div class="popup" id="popup3">
  <div class="popup-content">
    <span class="close-btn">×</span>
    <p>菜单项3对应弹窗内容</p>
  </div>
</div>

2. 基础CSS样式 #

控制弹窗的展示层级、位置和默认状态：

/* 弹窗默认样式：隐藏+全屏半透明遮罩 */
.popup {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
/* 弹窗内容区样式 */
.popup-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 70%;
  max-width: 500px;
  position: relative;
}
/* 关闭按钮样式 */
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

3. 交互实现代码 #

原生JavaScript实现 #

无需引入额外依赖，直接写入页面脚本即可运行：

// 获取所有元素节点
const menuItems = document.querySelectorAll('.menu-item');
const popups = document.querySelectorAll('.popup');
const closeBtns = document.querySelectorAll('.close-btn');

// 绑定菜单项点击事件
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    const targetPopupId = item.getAttribute('data-popup-target');
    document.getElementById(targetPopupId).style.display = 'block';
  })
})

// 绑定关闭按钮点击事件
closeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    btn.closest('.popup').style.display = 'none';
  })
})

// 点击遮罩层关闭弹窗
popups.forEach(popup => {
  popup.addEventListener('click', (e) => {
    if(e.target === popup) popup.style.display = 'none';
  })
})

jQuery实现 #

需先在页面引入jQuery库，再执行以下代码：

// 菜单项点击触发弹窗
$('.menu-item').on('click', function() {
  const targetPopupId = $(this).data('popup-target');
  $(`#${targetPopupId}`).show();
})

// 关闭按钮隐藏弹窗
$('.close-btn').on('click', function() {
  $(this).closest('.popup').hide();
})

// 点击遮罩隐藏弹窗
$('.popup').on('click', function(e) {
  if(e.target === this) $(this).hide();
})

注意事项 #

• 引入jQuery时需保证库文件加载完成后再执行自定义脚本，避免出现$ is not defined报错
• 菜单项的data-popup-target属性值需和对应弹窗的id完全一致，避免匹配错误
• 若需添加流畅的过渡动画，可将display属性的切换替换为CSS opacity + visibility的过渡效果

内容的提问来源于stack exchange，提问作者jahidulwd