How to close div clicking outside of it

Question

Now I am closing the alert box when I clicked on the 'x' but I want to close the alertbox when I click outside of it.

Please see my code here :http://jsfiddle.net/Ur5Xn/

How to close alertbox clicking outside of it?

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

or http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — epascarello, Oct 24 '13 at 12:53
Just to make this clear, this isn't an alert box. It's just a div. — ED-209, Oct 24 '13 at 12:53

score 2 · Answer 1 · 2013-10-24T13:13:31.543

2

This should work: 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();
    }
});

edited Oct 24 '13 at 13:13

answered Oct 24 '13 at 13:03

score 2 · Accepted Answer · answered Oct 24 '13 at 13:19

try this code

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

score 1 · Answer 3 · answered Oct 24 '13 at 13:04

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

score 1 · Answer 4 · answered Oct 24 '13 at 13:04

Here is the update working code:

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

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

How to close div clicking outside of it

4 Answers4