Modal: Modal close clicking outside

Modal: Modal close clicking outside

<!-- modal -->
<div class="overlay__modal">
	<!-- modal container -->
	<div class="modal-container">
		<!-- boton cerrar -->
		<a href="" class="btn--cerrar"><img src="Img/ico-close.svg" alt="Cerrar"></a>
		
		<!-- modal info -->
		<div class="modal__info">

			<!-- modal header -->
			<div class="modal__header">
			<figure class="logo">
				<img src="img" alt="IMG">
			</figure>
			</div>
			<!-- modal body -->
			<div class="modal__body">												
				<h4 class="title">Title</h4>
				<p class="txt">text</p>
				
			
			</div>
			
		</div>
	</div>
</div>
<!-- / modal -->


.overlay__modal
	position fixed
	width 100%
	height 100%
	top 0
	left 0
	background rgba(black, .25)
	z-index 10
	box-sizing content-box
	opacity 0
	visibility hidden
	transition all .45s ease
	&.show
		opacity 1
		visibility visible
	+below(1000px)
		padding 0
	.modal-container
		align()
		width 90%
		max-width 700px
		background #F5F5F5
		border-radius 5px
		padding 40px
		font-size 2em
		
		.btn--cerrar	
			position absolute
			right 0
			top 0
			max-width 40px
			padding 10px
			border-radius 0 5px 0 0
			transition all .35s ease
			&:hover
				background $rojo
				color white
		.modal
			&__info
				.modal
					&__header
						margin-bottom 20px
						line-height 1.3
						.logo
							max-width 180px
			&__body
				color #9B9B9B
				max-height 480px
				overflow-y auto
				+below(480px)
					max-height 300px
				.txt
					font-size 0.8em
					+below(480px)
						font-size 0.7em
				.title
					+below(480px)
						font-size 0.8em
						margin-bottom 20px
						
					
			&__footer
				clearfix()
				text-align center
				.btn
					display inline-block
					margin 0 10px
					+below(480px)
							stack()
							margin-bottom 15px
					.i-accept
					.i-reject
						font-size 1.5em
						vertical-align text-top
					.i-descarga
						font-size 1.4em
						vertical-align text-top

	.center
		text-align center
		
.msg-autorizado
	background #417505
	padding 10px
	color white
.msg-rechazado
	background #F0575C
	padding 10px
	color white
	




<script>
	$(function(){
		// mostrar modal
		$('.item a').on('click', function(event) {
			event.preventDefault();
			$('.modal-container').unbind('click');
			
			// muestra modal de respuesta
			$('.overlay__modal').addClass('show')

		});


		// cerrar modal
		$('.modal-container').find('.btn--cerrar').on('click', function(event) {
			event.preventDefault();
			$(".overlay__modal").removeClass('show')
		});

		$('.overlay__modal').mousedown(function(e) {
			var clicked = $(e.target);  // get the element clicked
			if (clicked.is('.modal-container') || clicked.parents().is('.modal-container')) {
				return;  //click happened within the dialog, do nothing here
		   } else {  //click was outside the dialog, so close it
		     $('.overlay__modal').removeClass('show')
		   }
		});
	})
</script>