Merge pull request AUTOMATIC1111#13480 from AUTOMATIC1111/popup-fix

Fix accidentally closing popup dialogs

Author: AUTOMATIC1111

javascript/extraNetworks.js

@@ -222,27 +222,24 @@ function extraNetworksSearchButton(tabs_id, event) {
 
 var globalPopup = null;
 var globalPopupInner = null;
+
 function closePopup() {
     if (!globalPopup) return;
-
     globalPopup.style.display = "none";
 }
+
 function popup(contents) {
     if (!globalPopup) {
         globalPopup = document.createElement('div');
-        globalPopup.onclick = closePopup;
         globalPopup.classList.add('global-popup');
 
         var close = document.createElement('div');
         close.classList.add('global-popup-close');
-        close.onclick = closePopup;
+        close.addEventListener("click", closePopup);
         close.title = "Close";
         globalPopup.appendChild(close);
 
         globalPopupInner = document.createElement('div');
-        globalPopupInner.onclick = function(event) {
-            event.stopPropagation(); return false;
-        };
         globalPopupInner.classList.add('global-popup-inner');
         globalPopup.appendChild(globalPopupInner);
 

style.css

@@ -585,7 +585,6 @@ table.popup-table .link{
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgba(20, 20, 20, 0.95);
 }
 
 .global-popup *{
@@ -594,9 +593,6 @@ table.popup-table .link{
 
 .global-popup-close:before {
     content: "×";
-}
-
-.global-popup-close{
     position: fixed;
     right: 0.25em;
     top: 0;
@@ -605,10 +601,20 @@ table.popup-table .link{
     font-size: 32pt;
 }
 
+.global-popup-close{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(20, 20, 20, 0.95);
+}
+
 .global-popup-inner{
     display: inline-block;
     margin: auto;
     padding: 2em;
+    z-index: 1001;
 }
 
 /* fullpage image viewer */