Simplify usage of modal

index.html

@@ -196,7 +196,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
         <div class="title" ng-bind-html="activeBuffer().title | irclinky:'_blank'" title="{{activeBuffer().title}}"></div>
         <div class="actions pull-right vertical-line-left">
           <div class="pull-left">
-            <a class="settings-toggle" ng-click="toggleModal('settingsModal')" title="Options menu">
+            <a class="settings-toggle" ng-click="showModal('settingsModal')" title="Options menu">
               <i class="glyphicon glyphicon-cog"></i>
             </a>
           </div>
@@ -263,7 +263,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
       </div>
     </div>
     <div id="soundNotification"></div>
-    <div id="settingsModal" class="gb-modal" data-state="hidden" ng-click="toggleModal('settingsModal')">
+    <div id="settingsModal" class="gb-modal" data-state="hidden" ng-click="closeModal($event)">
       <div class="modal-dialog" ng-click="preventModalToggle('settingsModal', $event)">
         <div class="modal-content">
           <div class="modal-header">
@@ -383,7 +383,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
             </ul>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-primary" ng-click="toggleModal('settingsModal')">Close</button>
+            <button type="button" class="btn btn-primary" ng-click="closeModal($event)">Close</button>
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->

js/glowingbear.js

@@ -1080,10 +1080,18 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
     };
 
-    // Modal toggles
+    $scope.showModal = function(elementId) {
-    $scope.toggleModal = function(elementId) {
+        document.getElementById(elementId).setAttribute('data-state', 'visible');
-        var element = document.getElementById(elementId);
+    };
-        element.setAttribute('data-state', element.getAttribute('data-state') === "hidden" ? "visible" : "hidden");
+    $scope.closeModal = function($event) {
+        function closest(elem, selector) {
+            var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;
+            while (elem) {
+                if (matchesSelector.call(elem, selector)) return elem;
+                else elem = elem.parentElement;
+            }
+        }
+        closest($event.target, '.gb-modal').setAttribute('data-state', 'hidden');
     };
 
     $scope.preventModalToggle = function(elementId, event) {