Закрыть модальное нажатие за пределами модального JS на iOS - PullRequest
Новая
       11

Закрыть модальное нажатие за пределами модального JS на iOS

0 голосов
/ 26 сентября 2018

Как мне сделать этот код close a modal, когда пользователь нажимает за пределами модального окна как на 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>

1 Ответ

0 голосов
/ 26 сентября 2018

Привязать событие touchend и click к элементу окна:

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>

Редактировать: Обновлен фрагмент кода.

В этом решении я добавил простое состояние для запуска closeметод только тогда, когда состояние open.С помощью метода closest мы осуществляем поиск по всем родителям выбранного элемента, если есть элемент, равный modal.

Только когда closest равно нулю или имеет длину 0, мы закрываем модальное поле.

...