Скрывать блок при клике вне него [дубликат]

187
09 декабря 2018, 18:10

На данный вопрос уже ответили:

  • Как в javascript “закрывать” div при клике вне этого дива? 4 ответа

На странице есть кнопка, при клике на которую всплывает блок div

 function viewDiv(){
  document.getElementById("div1").style.display = "block";
};

Как сделать так, чтобы при клике вне блока, от снова скрывался? И еще он почему-то появляется не по центру экрана, а где-то в углу, как это поправить?

Answer 1

Суть в том чтобы проверить элемент на котором нажали, если он не внутри окна и не является самим окном, то спрятать окно. Если нужна поддержка IE 11, то могу заменить, но будет больше кода.

let btn = document.querySelector('button') 
let element = document.querySelector('.div1') 
 
// кнопка 
btn.addEventListener('click', ({ target }) => { 
  element.style.display = 'block' 
}) 
 
// клик вне модалки и кнопки 
document.addEventListener('click', outsideClickListener) 
 
function outsideClickListener ({ target }) { 
  if (!element.contains(target) && target !== btn) 
    element.style.display = 'none' 
}
.div1 { 
   background: yellow; 
   width: 100px; 
   height: 100px; 
   position: absolute; 
   left: 50%; 
   top: 50%;  
   margin-left: -50px; 
   margin-top: -50px; 
   display: none; 
}
<button>Показать</button> 
<div class="div1"></div>

READ ALSO
Создание списка с колонками

Создание списка с колонками

Появилась нужда сделать список с колонками, чтобы их размер можно было регулироватьТакие списки используются везде, но оказалось что, не все...

183
Запись значений в excel по условиям

Запись значений в excel по условиям

помогите реализовать, или посоветуйте вектор направления, я новичок в этом делеСуть такова, читается excel файл, обрабатывается, и создаётся...

153
short в byte без потери данных

short в byte без потери данных

Я понимаю что типы разные не только по самому типу, диапазону, но и по их размеру, но есть ли безопасный способ привести тип short к типу byte? Это...

126