Закрытие div при клике вне его

452

15 декабря 2016, 16:23

Нужно закрыть 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 закрытие блока, но он тогда просто не открывается).

Answer 1

Идея состоит в том, чтобы запретить продвижение события 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>