Close Jquery UI dialog

Click anywhere outside the dialog on the overlay to close the dialog.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<div id="dialog" 
  title="ATENÇÃO!" 
  align="center">
    <p>Existe uma nova solicitação de proposta à ser executada</p>
</div>

<a href="#" id="open">Open dialog</a>

CSS

.ui-dialog {
    position: fixed;
    z-index: 1050;
    display: none;
    overflow: none;
    /*
  overflow: auto;
  overflow-y: scroll;
    */
    
    outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
    min-height: 16.42857143px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.ui-dialog .ui-dialog-title {
    margin: 0;
    line-height: 1.42857143;
}
.ui-dialog .ui-dialog-titlebar-close {
    margin-top: -2px;
    background: none;
}
.ui-dialog .ui-dialog-content {
    position: relative;
    background-color: #fff;
    outline: none;
}
.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    width: 100%;
    height: 50px;
    align-content: center;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: center;
}
.ui-dialog .ui-dialog-buttonpane button {
    position: absolute;
    z-index: 1040;
    text-decoration: none;
	  background-image: -webkit-linear-gradient(top, #3C49FC, #3CB0FD);
	  background-image: -moz-linear-gradient(top, #3C49FC, #3CB0FD);
	  background-image: -ms-linear-gradient(top, #3C49FC, #3CB0FD);
	  background-image: -o-linear-gradient(top, #3C49FC, #3CB0FD);
	  background-image: linear-gradient(to bottom, #3C49FC, #3CB0FD);		
}

.ui-dialog .ui-dialog-buttonpane button:active,.ui-dialog .ui-dialog-buttonpane button.active { 
	text-decoration: none;
	background-image: -webkit-linear-gradient(top, #3CB0FD, #3C49FC);
	background-image: -moz-linear-gradient(top, #3CB0FD, #3C49FC);
	background-image: -ms-linear-gradient(top, #3CB0FD, #3C49FC);
	background-image: -o-linear-gradient(top, #3CB0FD, #3C49FC);
	background-image: linear-gradient(to bottom, #3CB0FD, #3C49FC);
	color: #FFF;
}	


.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}

JavaScript

$('#open').click(function () {
    $('#dialog').dialog('open');

});



jQuery(document).ready(function () {
    jQuery("#dialog").dialog({
        modal: true,
				show: {effect: "fade",duration: 500},
				hide: {effect: "fade",duration: 500},
				open: function(event, ui) {$(this)
        	.parents(".ui-dialog:first")
        	.find(".ui-dialog-titlebar-close").remove();},
				buttons: [{
        	text: "Teste",
					icon: "ui-icon-gear",
          iconPosition: "end",
					click: function() {$( this ).dialog( "close" );}
				}]
		});
});