Question

我想创建一个弹出窗口div，当点击show按钮时显示窗口再次点击它，popup 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/

我已经为整个div分配了一个clickhandler，并在必要时使用event.stopPropagation();取消了事件传播

我只在FF中测试过，你需要取消IE的传播： How to stop event propagation with inline onclick attribute?

Answer 2

将popup div放在另一个拥有css

的div上

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

并在set onClick事件中添加隐藏div1

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

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

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

2 个答案: