hide div when click on outside div, without using jquery

Question

I want to create a popup div, which displays window when clicks on show button when again I clicks on it, popup div will disappears, now I want that when I clicks anywhere on that page, the popup div must be disappears.

my code is:

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 (Need some help here)

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

here i put in jsfiddle abov code -http://jsfiddle.net/2hTGu/ — Umesh Panchani, Jul 23 '13 at 11:18
try this code : if (convbox.style.display == 'block') { btnconvrtr.className = 'btnconvrtr'; btnconvrtr.innerHTML = 'Show Area Converter'; convbox.style.display = 'none'; } else { btnconvrtr.className = 'btnconvrtrpressed'; btnconvrtr.innerHTML = 'Hide Area Converter'; convbox.style.display = 'block'; } — deepi, Jul 23 '13 at 11:21

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

I've updated the fiddle provided by @umesh25

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

I've assigned a clickhandler to the whole div and I cancel event propagation where necessary with event.stopPropagation();

I've tested only in FF, you need to cancel the propagation for IE too: How to stop event propagation with inline onclick attribute?

edited May 23 '17 at 11:51

Community

1
1

answered Jul 23 '13 at 11:27

Balint Bako

2,500
1
14
13

DejanG · Answer 2 · 2013-07-23T11:30:26.290

0

Place popup div on another div who has css

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

and than add in set onClick event hide that div1

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

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

edited Jul 23 '13 at 11:30

answered Jul 23 '13 at 11:23

DejanG

525
1
10
17

hide div when click on outside div, without using jquery

2 Answers2