如何实现点击背景或按钮关闭layer弹窗，支持Vanilla JS/jQuery

场景说明 #

交互逻辑如下：

• 默认状态无弹窗显示
• 点击按钮后弹窗显示
• 点击按钮或弹窗外部区域，弹窗隐藏

实现方案 #

以下提供两种实现方式，你可以对应替换代码中的选择器为你实际页面的元素类名/ID即可使用。
示例参考HTML结构：

<!-- 弹窗触发按钮 -->
<button id="layerBtn">点击打开弹窗</button>
<!-- layer弹窗容器 -->
<div id="layerModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; background: #fff; padding: 24px; z-index: 1000;">
  弹窗内部内容
</div>

1. 原生Vanilla JS实现 #

const layerBtn = document.getElementById('layerBtn')
const layerModal = document.getElementById('layerModal')

// 按钮点击切换弹窗状态
layerBtn.addEventListener('click', e => {
  e.stopPropagation()
  layerModal.style.display = layerModal.style.display === 'none' ? 'block' : 'none'
})

// 点击弹窗内部不触发关闭
layerModal.addEventListener('click', e => {
  e.stopPropagation()
})

// 点击页面其他区域关闭已显示的弹窗
document.addEventListener('click', () => {
  if(layerModal.style.display === 'block') {
    layerModal.style.display = 'none'
  }
})

2. jQuery实现 #

// 按钮点击切换弹窗状态
$('#layerBtn').on('click', function(e) {
  e.stopPropagation()
  $('#layerModal').toggle()
})

// 点击弹窗内部不触发关闭
$('#layerModal').on('click', function(e) {
  e.stopPropagation()
})

// 点击页面其他区域关闭已显示的弹窗
$(document).on('click', function() {
  if($('#layerModal').is(':visible')) {
    $('#layerModal').hide()
  }
})

补充说明 #

如果你使用的是官方layer.js组件，不需要手动操作元素的display属性，直接调用官方封装的layer.close()方法替换上述代码中修改显隐的逻辑即可。

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