点击非弹出框部分,如何让弹出框消失?

Question

如图,点击选择日历按钮弹出日历,如何做到点击日历以外的部分让日历消失呢?

Answer 1

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是唤起弹框的标签（可以理解为你的‘选择日期’），content是弹框的容器，doc就是model层

Answer 2

在打开弹窗的时候
document.body.addEventListener('click', fun)
弹窗关闭时
document.body.removeEventListener('click', fun)

记得点击弹窗要阻止冒泡

Answer 3

弹框打开的事件要阻止冒泡