在iOS上的模态JS外部单击时关闭模态

Question

当用户在iOS和非触摸设备上在模式窗口之外单击时，如何使此代码close modal ？

我在这里了解有关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事件绑定到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方法。 使用最接近的方法，如果存在等于modal的元素，我们将搜索clicked元素的所有父元素。

仅当closest为空或长度为0时，我们才会关闭模态。