纯CSS模态框添加点击外部关闭功能的实现方案咨询

完全不用jQuery，只需要几行原生JS或者微调下结构用纯CSS就能搞定，你的简洁代码风格完全可以保留～

方案一：基于你现有结构的原生JS（或Angular适配版） #

你的模态框是用CSS :target 伪类实现显示隐藏的，核心思路是点击灰色背景区域时，手动修改URL的hash为#close，触发CSS的关闭逻辑。

原生JS写法（直接加在页面里） #

在你的代码末尾加上这段极简JS：

document.getElementById('openModal').addEventListener('click', function(e) {
  // 只有点击的是灰色背景本身（不是弹窗内容）时才关闭
  if (e.target === this) {
    window.location.hash = '#close';
  }
});

Angular适配写法（更符合你的项目框架） #

如果你想把逻辑放到Angular控制器里，避免直接操作DOM，可以这样改：

1. 在控制器里添加方法：

angular.module('你的应用名').controller('demoCtrl', function($scope, $window) {
  // 你的现有代码...
  $scope.closeModalOnOutside = function(e) {
    const modalContainer = document.getElementById('openModal');
    if (e.target === modalContainer) {
      $window.location.hash = '#close';
    }
  };
});

2. 给模态框容器添加ng-click：

<div id="openModal" class="modalDialog" ng-click="closeModalOnOutside($event)">

方案二：纯CSS方案（需要微调结构） #

如果你想彻底不用JS，可以把锚点逻辑换成checkbox + label的组合，利用:checked伪类控制显示：

1. 修改HTML结构：

<div ng-controller="demoCtrl">
  <label for="modalSwitch">Open Modal</label>
  <!-- 隐藏的复选框作为开关 -->
  <input type="checkbox" id="modalSwitch" class="modal-switch" hidden>
  
  <div class="modalDialog">
    <!-- 灰色背景区域用label包裹，点击就取消复选框选中 -->
    <label for="modalSwitch" class="modal-backdrop"></label>
    <div class="content">
      <label for="modalSwitch">X</label>
      <h1>Modal Box</h1>
      <button ng-click="changeState()">Show Client</button>
      <div ng-if="client.state">{{client.name}}</div>
    </div>
  </div>
</div>

2. 调整对应CSS：

.modalDialog {
  display: none;
  /* 你的全屏定位样式 */
}
/* 复选框选中时显示模态框 */
.modal-switch:checked ~ .modalDialog {
  display: block;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.content {
  position: relative;
  z-index: 1;
  /* 你的弹窗样式 */
}

这样点击灰色背景、X按钮都能关闭模态框，完全不需要JS。

内容的提问来源于stack exchange，提问作者N.Car