Javascript 单击外部div时隐藏div，而不使用jquery

我想创建一个弹出div，当我再次点击show按钮时，弹出div将消失，现在我想当我点击页面上的任何地方时，弹出div必须消失

我的代码是：

---

CSS:

---

html:

---

将弹出div放置在另一个具有css的div上

 `#div1{position:absolute; width:100%; height:100%; top:0; left:0;}`

并在加载项集合onClick事件中隐藏该div1

    <div id="div1" onclick="hidePopup">
         <div id="popup"></div>
    </div>

    function hidePopup()
    {
    document.getElementById("div1").style.display="none";
    }

函数hidePopup（）
{
document.getElementById（“div1”）.style.display=“无”；
}

我已经更新了@umesh25提供的小提琴

我已经为整个div分配了一个clickhandler，并在必要时使用

event.stopPropagation（）取消事件传播

我只在FF中进行了测试，您也需要取消IE的传播：
你能把它放在JSFIDLE中吗？这里我放在JSFIDLE abov代码中-试试下面的代码：if（convbox.style.display='block'）{btnconvrtr.className='btnconvrtr'；btnconvrtr.innerHTML='Show areaconverter'；convbox.style.display='none'；}其他{btnconvrtr.className='btnconvrtrpressed'；btnconvrtr.innerHTML='Hide Area Converter'；convbox.style.display='block'；}
function btnconvrtr_click() {
    var btnconvrtr = document.getElementById('btnconvrtr');
    var convbox = document.getElementById('convbox');
    if (convbox.style.display == '') {

        btnconvrtr.className = 'btnconvrtr';
        btnconvrtr.innerHTML = 'Show Area Converter';
        convbox.style.display = 'none';
    }
    else {
        btnconvrtr.className = 'btnconvrtrpressed';
        btnconvrtr.innerHTML = 'Hide Area Converter';
        convbox.style.display = '';
    }
}

function btnconvert_click() {

    var convertfrom = document.getElementById('dlconvfrom').value;
    var convertto = document.getElementById('dlconvto').value;
    var qty = document.getElementById('txtconvrtfrom').value;

    var result = Area_convert(convertfrom, convertto, qty);
    document.getElementById('txtconvrtto').value = (isNaN(result) ? '' : result);
}

function Area_convert(convert_from,convert_to,qty)
{
    var tblconvert = {
        'area': {
            'hectare': 1,
            'sqmeter': 10000,
            'sqfoot': 107639,
            'acre': 2.47105,
            'are': 100,
            'gunta': 98.842
        }
    };
    var result = qty * (tblconvert.area[convert_to] / tblconvert.area[convert_from]);
    result = Math.ceil(result * 1000000) / 1000000
    return result;
}

 `#div1{position:absolute; width:100%; height:100%; top:0; left:0;}`

    <div id="div1" onclick="hidePopup">
         <div id="popup"></div>
    </div>

    function hidePopup()
    {
    document.getElementById("div1").style.display="none";
    }