如何關閉在它外面的div點擊

Question

現在，我點擊'x'時關閉了警告框，但當我單擊其外部時，我想關閉警報框。

請在這裏看到我的代碼：http://jsfiddle.net/Ur5Xn/

如何關閉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(); 
    }); 
}); 

Answer 1

試試這個代碼

$(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(); 
    }); 
}); 

Answer 2

這應該工作：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(); 
    } 
}); 

Answer 3

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

Answer 4

這裏是更新工作代碼：

$(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/