2

Нужно закрыть div, если клик был вне его области.

Имеем:

function backcall() {
    var status = document.getElementById('backcallmsgdiv');
    status.style.height = "500px";
    status.style.border = "1px solid #A52629";
    status.style.overflow = "visible";       
}

function closebc() {
    var status = document.getElementById('backcallmsgdiv');
    status.style.height = "0px";
    status.style.border = "0px solid #A52629";
    status.style.overflow = "hidden";
    status.addEventListener("click", stopEvent, false);
}
<div class="cl1">
    <a href="#" onclick="backcall()">Свяжитесь с нами</a>
</div>
<div id="backcallmsgdiv">
    <a href="#" onclick="closebc()" >
        <div id="close">X</div>
    </a>
    <div class="tre"></div>
</div>

Как закрыть блок при клике вне его? Пробовал повесить функцию на body (при клике на body закрытие блока, но он тогда просто не открывается).

3 ответа 3

5

Идея состоит в том, чтобы запретить продвижение события click по DOM вверх, если клик произведён по элементу "Свяжитесь с нами" или #backcallmsgdiv (за исключением #close). В таком случае можно закрывать окно по клику в document:

document.addEventListener('DOMContentLoaded', onDomReady);

function onDomReady() {
    var status = document.getElementById('backcallmsgdiv');
    var conactUs = document.getElementById('contactUs');
    var close = document.getElementById('close');
    
    conactUs.addEventListener('click', function(event) {
        status.style.height = "500px";
        status.style.border = "1px solid #A52629";
        status.style.overflow = "visible";
        event.stopPropagation();
    });
    
    status.addEventListener('click', function(event) {
        event.stopPropagation();
    });
    
    function closebc() {
        status.style.height = "0px";
        status.style.border = "0px solid #A52629";
        status.style.overflow = "hidden";
    }
    
    document.addEventListener('click', closebc);
    close.addEventListener('click', closebc);   
};
<div class="cl1">
    <a id="contactUs" href="#">Свяжитесь с нами</a>
</div>
<div id="backcallmsgdiv">
    <a href="#">
        <div id="close">X</div>
    </a>
</div>

2
  • спасибо, поуду обдумывать ваш код 2 июл 2015 в 13:02
  • @ГошкаТарасов на здоровье. Логика кода ваша, только onclick заменены на addEventListener и добавлен тот самый click на body.
    – Regent
    2 июл 2015 в 13:05
0

попробывал повесить функцию на body (при клике на боде закрытие блока, но он тогда просто не открывается)

Забыл проверить, что кликается не что-то внутри этого div'а.

0

function listenClick(selector) {
  $(document).mouseup(function(e) { // событие клика по веб-документу    
    if (!selector.is(e.target) // если клик был не по нашему блоку
      &&
      !selector.has(e.target).length //не по дочерним
      &&
      !selector.parent(selector).has(e.target).length) { // не по родителю      
      // здесь анимация к примеру fadeOut() 
      event.stopPropagation();
    }
  });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.