如何关闭在它外面的div点击

现在，我点击'x'时关闭了警告框，但当我单击其外部时，我想关闭警报框。如何关闭在它外面的div点击

如何关闭alertbox点击之外呢？

jQuery的：

$(document).ready(function(){ 
    function showAlertBox(){ 
    $("#alert").css("display","inherit"); 
    $("#content").addClass("back"); 
    } 
    function removeAlertBox(){ 
     $("#alert").css("display","none"); 
     $("#content").removeClass("back");   
    } 

    $("#alertClose").click(function(){ 
     removeAlertBox(); 
    }); 
    $("#alertShow").click(function(){ 
     showAlertBox(); 
    }); 
});

来源

2013-10-24 Xavi

或http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element – epascarello

只是为了清楚这一点，这不是一个警告框。这只是一个div。 –

试试这个代码

$(document).ready(function(){ 
    function showAlertBox(){ 
    $("#alert").css("display","inherit"); 
    $("#content").addClass("back"); 
    } 
    function removeAlertBox(){ 
     $("#alert").css("display","none"); 
     $("#content").removeClass("back");   
    } 

    $("#alertClose").click(function(e){ 
     e.stopPropagation(); 
     removeAlertBox(); 
    }); 
    $("#alertShow").click(function(e){ 
     e.stopPropagation(); 
     showAlertBox(); 
    }); 

    $(document).click(function(e){ 
     removeAlertBox(); 
    }); 
});

来源

2013-10-24 13:19:10

这应该工作：http://jsfiddle.net/LagBE/

$(document).on('mouseup', function (e) 
{ 
    var alert = $('#alert'); 

    // Make sure neither the alert, 
    // nor anything inside of it was clicked 

    if (!alert.is(e.target) && alert.has(e.target).length === 0) 
    { 
     removeAlertBox(); 
    } 
});

来源

2013-10-24 13:03:06

jsfiddle here

HTML：

<div id="alert"> 
    <div id='transBG'></div> 
    <div id="alertbox">I am an alert box <span id="alertClose">X</span></div> 
</div> 
<div id="content"> 
    Content <span id="alertShow">Show Alert Box</span> 
</div>

CSS：

#alert { 
    display:none; 
} 
#alertbox{ 
    border:1px solid #000; 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    height:100px; 
    width:200px; 
    z-index:9; 
} 
#transBG{ 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%;  
    z-index:8; 
} 
.back{ 
    opacity:0.5; 
}

的javascript：

$(document).ready(function(){ 
    function showAlertBox(){ 
    $("#alert").css("display","inherit"); 
    $("#content").addClass("back"); 
    } 
    function removeAlertBox(){ 
     $("#alert").css("display","none"); 
     $("#content").removeClass("back");   
    }  

    $("#transBG").click(function(){ 
     removeAlertBox(); 
    }); 

    $("#alertClose").click(function(){ 
     removeAlertBox(); 
    }); 
    $("#alertShow").click(function(){ 
     showAlertBox(); 
    }); 
});

来源

2013-10-24 13:04:17

这里是更新工作代码：

$(document).ready(function() { 
    function showAlertBox() { 
     $("#alert").css("display", "inherit"); 
     $("#content").addClass("back"); 
     return false; 
    } 

    function removeAlertBox() { 
     $("#alert").css("display", "none"); 
     $("#content").removeClass("back"); 
     return false; 
    } 

    $("#alertClose").click(removeAlertBox); 
    $("#alertShow").click(showAlertBox); 
    $('#alert').click(false); 
    $(document).click(removeAlertBox); 
});

见http://jsfiddle.net/Ur5Xn/34/

来源

2013-10-24 13:04:40

如何关闭在它外面的div点击

回答

相关问题