隱藏div當點擊外部div，而不使用jquery

Question

我想創建一個彈出div，當點擊顯示按鈕時顯示窗口，當我再次點擊它時，彈出div將消失，現在我想當我點擊任何地方在該頁面上，彈出的div必須消失。

我的代碼是：

---

CSS：

/*Global*/ 
select 
{ 
    white-space:nowrap; 
    border:1px solid rgba(0,0,0,.5); 
    -webkit-appearance: button; 
    appearance: button; 
} 
input 
{ 
    border:1px solid rgba(0,0,0,.5); 
    display:inline-block; 
} 
/*For UnitConversion*/ 
#txtUType 
{ 
    width:20px; 
} 
#btnconvrtr 
{ 
    border: 1px solid #3079ed; 
    color:#fff; 
    font-weight:bold; 
    display:inline-block; 
    text-decoration:none; 
    width:157px; 
    text-align:center; 
    cursor:pointer; 
    border-radius:4px; 
    padding:2px; 
    appearance: button; 
} 
.btnconvrtr 
{ 
    BACKGROUND-COLOR: #4d90fe; 
} 
.btnconvrtrpressed 
{ 
    BACKGROUND-COLOR: #3f81ff; 
} 
#convbox 
{ 
    border:1px solid rgba(0,0,0,.5); 
    padding:5px; 
    font-family: arial, sans-serif; 
    font-size:19px; 
    background:#fff; 
    right:0; 
    box-shadow: 4px 4px 4px rgba(0,0,0,.3); 
    margin:0 15px 0px 15px ; 
    border-radius:4px; 
} 


#dlconvto 
{ 
    margin-left:2px; 
} 
#btnconvert 
{ 
    width:100px; 
    display:inline-block; 
    margin:5px 2px 2px 2px; 
    margin-left:30%; 
    border-radius:2px; 
    height:30px; 
} 

/*for User Type*/ 
.utype 
{ 
    padding:5px 5px 5px 5px; 
    border:1px solid #dcdcdc; 
    width:310px; 
    background:#fff; 
    display:inline-block; 
    margin-left:30%; 
    margin-top:20%; 
} 
.utype input[type=text] 
{ 
    height:20px; 
    margin:4px 4px 4px 4px; 
    border-radius:2px; 
} 
#dvddlutype,#dvtxtutype 
{ 
    display:inline; 
} 
#dvbtns 
{ 

} 
#dvlbler 
{ 
    color:Red; 
} 

#convrtrmain 
{ 
    overflow:visible; 
    display:block; 
    position:static; 
} 

---

HTML：

<div style="position:fixed;left:0px;bottom:0px;"> 
    <div id="convbox" style="display:none"> 
    <table> 
    <tr> 
     <td> 
     <input id="txtconvrtfrom" type="text" onkeypress="return OnlyNumbersWithDecimal(event,this);" maxlength="10"/>= 
     </td> 
     <td> 
     <input id="txtconvrtto" type="text" readonly="readonly"/> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <select id="dlconvfrom"> 
      <option value="hectare">Hectare</option> 
      <option value="acre">Acre</option> 
      <option value="are">Are</option> 
      <option value="gunta">Gunta</option> 
      <option value="sqmeter">Square Meter</option> 
      <option value="sqfoot">Square Foot</option> 
     </select> 
     </td> 
     <td> 
      <select id="dlconvto"> 
      <option value="hectare">Hectare</option> 
      <option value="acre">Acre</option> 
      <option value="are">Are</option> 
      <option value="gunta">Gunta</option> 
      <option value="sqmeter">Square Meter</option> 
      <option value="sqfoot">Squeare Foot</option> 
     </select> 
     </td> 
    </tr> 
    </table> 

    <input type="button" value="Convert" id="btnconvert" onclick="btnconvert_click()" /> 
    </div> 
    <div id="convrtrmain"> 
    <div id="btnconvrtr" class="btnconvrtr" onclick="btnconvrtr_click()" > 
     Show Area Convertor 
    </div> 
    </div> 

</div> 

---

的Javascript （在這裏需要一些幫助）

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; 
} 

Answer 1

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

http://jsfiddle.net/balintbako/2hTGu/1/

我分配了一個函數clickhandler整個DIV和我取消其中具有event.stopPropagation();

我必要的事件傳播已經在FF中測試過了，你還需要取消IE的傳播： How to stop event propagation with inline onclick attribute?

Answer 2

將彈出DIV上的另一個DIV誰擁有CSS

`#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"; 
    }