javascript - 在 iOS 上点击模态 JS 外部时关闭模态

Question

当用户在 iOS 和非触摸设备上点击模态窗口外时，如何使此代码关闭成为模态？

我在这里了解一些关于 window.onclick 和 touch 设备的其他类似主题，但我对 JS 比较陌生，我不知道如何正确结合此功能(适用于两个平台)。

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
var closeModal = function(event) {
  if (event.target == modal) {
     modal.style.display = "none";
  }
}

window.addEventListener('click', closeModal);
window.addEventListener('touchend', closeModal);

.modal {
    display: none;
    position: fixed;
    overflow: hidden;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: black;
    color: white; 
    font-size: 100%;
}
.close {
    color: white;
    float: right;
    font-size: 70%;
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
}

<div id="myModal" class="modal">

<span class="close">&times;</span>

<p>Some content here</p>

</div>

Answer 1

将 touchend 和 click 事件绑定(bind)到 window 元素:

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var state = 'closed';

btn.onclick = function() {
    modal.style.display = "block";
    
    setTimeout(function() {
        state = 'open';
    }, 300);
}

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

var closeModal = function(event) {
    var closest = event.target.closest('#myModal');
  
    if ((null === closest || 0 < closest.length) && 'open' === state) {
        modal.style.display = "none";
        state = 'closed';
    }
}

window.addEventListener('click', closeModal);
window.addEventListener('touchend', closeModal);

.modal {
    display: none;
    position: fixed;
    overflow: hidden;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: black;
    color: white; 
    font-size: 100%;
}
.close {
    color: white;
    float: right;
    font-size: 70%;
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
}

<button id="myBtn">open</button>

<div id="myModal" class="modal">

<span class="close">&times;</span>

<p>Some content here</p>

</div>

编辑:更新了代码片段。

在该解决方案中，我添加了一个简单的状态，仅当状态为 open 时才运行 close 方法。随着closest如果存在等于 modal 的元素，我们将搜索所点击元素的所有父级方法。

只有当 closest 为 null 或长度为 0 时，我们才会关闭模态框。