На данный вопрос уже ответили:
На странице есть кнопка, при клике на которую всплывает блок div
function viewDiv(){
document.getElementById("div1").style.display = "block";
};
Как сделать так, чтобы при клике вне блока, от снова скрывался? И еще он почему-то появляется не по центру экрана, а где-то в углу, как это поправить?
Суть в том чтобы проверить элемент на котором нажали, если он не внутри окна и не является самим окном, то спрятать окно. Если нужна поддержка 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>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей