模态框可正常打开但点击X按钮或外部区域无法关闭

对照给出的代码，共存在3处直接影响模态框关闭逻辑的问题：

• 关闭按钮的获取逻辑存在偏差
  代码通过document.getElementsByClassName("close")[0]全局取页面中第一个带close类名的元素作为关闭按钮，如果页面中其他模块（其他弹窗、侧边栏等）也存在同close类名的元素，这里会优先取到文档流中位置最靠前的非目标元素，导致当前模态框内的X按钮没有绑定点击关闭事件。
• 模态遮罩层尺寸设置错误
  标准模态框的遮罩层需要占满整个视口，才能正确捕获“点击外部区域关闭”的事件。当前代码给.modal类设置width: 50%，遮罩层仅覆盖屏幕左半部分，右半屏区域完全不在模态元素的事件捕获范围内，点击这部分时无法触发关闭判断。
• 样式笔误与遮罩效果缺失
  代码中padding-top: 50x为无效写法，浏览器会直接忽略该声明（正确单位应为px）；同时最终生效的遮罩背景色为rgba(0,0,0,0)，即完全透明，既没有视觉上的层级提示，也会让用户对“模态外部区域”的判断出现偏差。

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px; /* 修正笔误的单位错误 */
  left: 0;
  top: 0;
  width: 100%; /* 修正为全视口宽度，覆盖整个屏幕 */
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* 修正为半透明遮罩，符合交互预期 */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

var modal = document.getElementById("WhiteSedan1");
var btn1 = document.getElementById("BtnWhiteSedan");
// 从当前模态框内部查找关闭按钮，避免全局匹配错误
var span = modal.getElementsByClassName("close")[0];

btn1.onclick = function(e) {
  // 阻止a标签默认锚点跳转行为
  e.preventDefault();
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

原有HTML结构无需调整，即可实现点击X按钮、点击遮罩区域正常关闭模态框的效果。

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