How to close an alert box when clicking on it?

Question

Made this custom alert box:

<script type="text/javascript">
    $(function () {
        var $alert = $('#alert');
        if ($alert.length) {
            var alerttimer = window.setTimeout(function () {
                $alert.trigger('click');
            });
            $alert.animate({ height: $alert.css('line-height') || '80px' }, 200).click(function () {
                window.clearTimeout(alerttimer);
                $alert.animate({ height: '0' }, 200);
            });
        }
    });
</script> 

I want it to be open until the user chooses to click on it or anywhere else on the screen. How do I make this happen?

Answer 1

Assuming that clicking anywhere (in, or out, of the alert box itself) is supposed to hide/remove the alert:

$('body').click(
    function(){
        if ($alert.is(':visible')){
            $alert.hide();
        }
    });

should work, I think.

Answer 2

If you want to justs get rid of it, try calling the hide() function when an onclick event is triggered.

$.click(function() {
  $alert.hide();
});

Answer 3

The top answer here is excellent IMO. It covers the part about anywhere else on the screen.

The way to do it is to bind a click event to the body and stop propagation on any event that happens inside the area that isn't supposed to trigger closing the alert.