Click on the non-pop-up box, how to make the pop-up box disappear?

as shown in the picture, click the Select Calendar button to pop up the calendar. How to make the calendar disappear by clicking something other than the calendar?

clipboard.png

Aug.09,2021


document.body.addEventListener('click', fun)

document.body.removeEventListener('click', fun)

remember to click on the pop-up window to stop bubbling


the event that the pop-up box opens should prevent bubbling


var info = document.getElementById('info'),doc=document.getElementById("model"),content=document.getElementById('content')
document.body.addEventListener('click',function (e) {
    var e=e||window.event;
    if(doc.className.indexOf('model')>-1 && e.target!==content){
        doc.classList.remove('model');
        doc.style="display:none";
        document.body.style.overflow="";
    }
})
info.addEventListener('click',function (e) {
    var e=e||window.event;
    e.stopPropagation();
        doc.classList.add('model');
        doc.style="display:block";
        document.body.style="overflow:hidden";
},true)

info is the label that evokes the pop-up box (it can be understood that your 'choose date'), content is the container of the pop-up box, and doc is the model layer

Menu