Enhance user-friendliness of popup

service.js

@@ -517,7 +517,7 @@ class BesService {
         }
       }
     }
-    popup.hide()
+    BesPopupEl.hide()
   }
 
   // This function should be able to handle both cases or find a way that works for both.
@@ -722,7 +722,7 @@ class BesPopupEl extends HTMLElement {
       </style>
       <div class="bes-popup-container">
         <div class="bes-toolbar">
-          <button class="bes-close-btn">X</button>
+          <button class="bes-close-btn" onclick="BesPopupEl.hide()">X</button>
         </div>
         <div class="bes-text-div">
           <span class="popup-text">
@@ -767,10 +767,6 @@ class BesPopupEl extends HTMLElement {
     }
   }
 
-  hide() {
-    this.classList.remove('show')
-  }
-
   changeText(text) {
     this.clear()
     this.shadowRoot.querySelector('.popup-text').textContent = text
@@ -783,14 +779,16 @@ class BesPopupEl extends HTMLElement {
     replacementBtn.textContent = replacement
     replacementBtn.classList.add('bes-replacement')
     replacementBtn.addEventListener('click', () => {
-      if (allowReplacements) service.replaceText(el, match, replacement)
-      // TODO: Close popup
+      if (allowReplacements) {
+        service.replaceText(el, match, replacement)
+        BesPopupEl.hide()
+      }
     })
     replacementDiv.appendChild(replacementBtn)
   }
 
   dragMouseDown(e) {
-    e = e || window.event
+    e = e
     e.preventDefault()
     this.initialMouseX = e.clientX
     this.initialMouseY = e.clientY
@@ -843,6 +841,13 @@ class BesPopupEl extends HTMLElement {
       this.isMouseDownRegistered = true
     }
   }
+
+  static hide() {
+    let popups = document.querySelectorAll('bes-popup-el')
+    popups.forEach(popup => {
+      popup.classList.remove('show')
+    })
+  }
 }
 
 window.onload = () => {