Этот общий тип вопросов имеет несколько ответов, но все они используют старый скрипт или JQuery.
Какой сценарий "закрывает" DIV, если пользователь нажимает на него?
Например, старый код будет выглядеть примерно так:
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Я считаю, что первая часть нового кода начнется именно так.
document.addEventListener("click", modalOff);
Но после этого я застрял.
function modalOff() {
if (????) {
document.getElementByClassName('modal-a')[0].classList.remove('modal-b'); }
}
class model-a
содержит display: none;
класс modal-b
включает display:block;
удалив modal-b
DIV исчезает.
Но я не могу понять, как рассказать обозревателю "если пользователь щелкает за пределы DIV, сделайте следующий шаг". Что я проверяю?
Я предполагаю, что вы хотите использовать addEventListener
для выполнения этого.
//Add an event listener for the click event
document.addEventListener('click', closeModal)
//The function is called when the click is found, e is passed as the event variable
function closeModal(e) {
//Check if the click target is equal to the modal
if(e.target != modal)
#Code to hide modal
}
Вышеприведенный код должен делать трюк. Надеюсь это поможет.
"E" означает событие, когда запущен прослушиватель вентиляции, он передает объект события в вызываемую вами функцию. Это даже имеет нагрузку свойств, таких как элемент, который в этом случае был нажат. Это сохраняется как "цель".
window.onclick = function(event) {
if (event.target != modal) {
modal.style.display = "none";
}
}
Как вы сказали, вы хотите скрыть, если не цель клика...
Или немного более общий:
function hideOnOutsideClick(el){
return function(event){
var modal=document.getElementById(el);
if (event.target != modal) {
modal.style.display = "none";
}
}
}
Таким образом, вы можете:
window.addEventListener("click",hideOnOutsideClick("someid"));
addEventListener
В вашей функции modalOff
вам нужно проверить, нажал ли пользователь модальный или элемент внутри модального. Поэтому вам нужно сделать что-то вроде этого:
// check if you clicked on the modal or an object within the modal
var target = event.target;
while (target && target !== document.body && target !== modal) {
target = target.parentNode;
}
if (target !== modal) {
// close the modal here
}
Если пользователь щелкнул где-нибудь внутри модального, то в конце цикла, target === modal
; если они вышли за пределы модального, то target !== modal
.