diff --git a/public/js/app/app.js b/public/js/app/app.js
index 448f013..b7ac3e9 100644
--- a/public/js/app/app.js
+++ b/public/js/app/app.js
@@ -222,6 +222,24 @@ function changeTab(evt, section, tabName) {
 var modalQuality = document.getElementById('modal_quality');
 modalQuality.open = false
 
+window.onclick = function(event) {
+	if (event.target == modalQuality && modalQuality.open) {
+		$(modalQuality).addClass('animated fadeOut')
+	}
+}
+
+$(modalQuality).on('webkitAnimationEnd', function () {
+	if (modalQuality.open){
+		$(this).removeClass('animated fadeOut')
+		$(this).css('display', 'none')
+		modalQuality.open = false
+	}else{
+		$(this).removeClass('animated fadeIn')
+		$(this).css('display', 'block')
+		modalQuality.open = true
+	}
+})
+
 function openQualityModal(link){
 	$(modalQuality).data("url", link)
 	$(modalQuality).css('display', 'block')
@@ -239,5 +257,4 @@ function modalQualityButton(bitrate){
 		sendAddToQueue(url, bitrate)
 	}
 	$(modalQuality).addClass('animated fadeOut')
-	$(modalQuality).css('display', 'none')
 }