0

当点击发生在它之外时，我怎样才能让它<div>隐藏起来？我希望能够隐藏它，然后显示它后面页面的其余内容。

<html>
<style>
.overlay
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 80;
}
.popupContent
{
    background: #fff;
    padding: 5px;
    border: 1px solid black;
    position: fixed;
    top: 100px;
    left: 400px;
    bottom: 365px;
    right: 300px;
    z-index: 81;
}​

</style>

<div id="initialPopup">
    <div class="overlay"></div>
    <div class="popupContent" onclick="hideInitialPopup()">
    Good Morning, Please Upload Your File Today!
    </div>

</div>
 ​



<script>
function hideInitialPopup() {
    document.getElementById("initialPopup").style.display = "block";
    $("popupContent").mouseup(function(){
    if(! mouse_is_inside) $
}​
</script>

</html>
4

2 回答 2

2

通常，当您使用带有弹出/对话框之类的遮罩时，最简单的方法是将单击处理程序附加到遮罩本身，以在单击时隐藏弹出/对话框。

这是一个 jfiddle：http: //jsfiddle.net/peterdev001/SDNUj/

于 2012-07-23T21:14:59.970 回答
2

使用 jQueryevent.target确定您是否在框内单击：

 $(document).on('click',function(e) {
     if (!$(e.target).closest('#my_div_id').length) {
         $('#my_div_id').hide();
     } 
 });​

http://jsfiddle.net/mblase75/PNYTX/

于 2012-07-23T20:17:19.130 回答