From 2cfe3caac3192570a7a6df4fde826be9d654c05e Mon Sep 17 00:00:00 2001
From: dofxo <kargat504@gmail.com>
Date: Mon, 11 Sep 2023 19:09:26 +0330
Subject: [PATCH 1/2] fix(silverBoxClose): now use the given element to close
 the closest container

---
 public/src/js/components/silverBox/button.js |  2 +-
 public/src/js/helpers/closeButtonOnClick.js  | 20 +++++-----------
 public/src/js/silverBox.js                   | 25 ++++++++++----------
 3 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/public/src/js/components/silverBox/button.js b/public/src/js/components/silverBox/button.js
index 14dd459..ebbaf5a 100644
--- a/public/src/js/components/silverBox/button.js
+++ b/public/src/js/components/silverBox/button.js
@@ -43,7 +43,7 @@ function silverBoxButtonComponent(
 	if (buttonName.closeOnClick !== false) {
 		// Closes silverBox on click an run onClose function if it exits
 		buttonEl.addEventListener("click", () => {
-			silverBoxClose({ onClose: onCloseConfig });
+			silverBoxClose({ onClose: onCloseConfig, element: buttonEl });
 		});
 	}
 
diff --git a/public/src/js/helpers/closeButtonOnClick.js b/public/src/js/helpers/closeButtonOnClick.js
index 70edb89..3c6fe26 100644
--- a/public/src/js/helpers/closeButtonOnClick.js
+++ b/public/src/js/helpers/closeButtonOnClick.js
@@ -2,21 +2,13 @@
 import silverBoxDisableScroll from "./silverBox/disableScroll";
 /** selects the silverBox container and closes the element*/
 function silverBoxClose({ uniqueID, timer, onClose, element }) {
-	// if the modal doesn't have a timer, the modal will be closed on click
-	if (!timer) {
-		// selects the all silverBox-container classes in the page
-		const silverBox = document.querySelectorAll(".silverBox-container");
-
-		if (silverBox[silverBox.length - 1])
-			silverBox[silverBox.length - 1].remove();
-		// checks for silverBoxAfter removing the wrapper
-		silverBoxDisableScroll(".silverBox-overlay");
-	}
-	// If timer exits specific modal will be removed from page
-	else if (timer) {
+	// If timer config exists, silverBoxCloseAfterTimeout would get a uniqueID and will close the silverBox using that ID
+	if (timer) {
 		silverBoxCloseAfterTimeout(uniqueID);
-	} else if (element) {
-		element.closest(".silverBox").remove();
+	}
+	// if there is a element passed to silverBoxClose object, the closest silverBox-container to that element would be removed
+	else if (element) {
+		element.closest(".silverBox-container").remove();
 	}
 
 	// Runs onClose function if it exits
diff --git a/public/src/js/silverBox.js b/public/src/js/silverBox.js
index 8ed056c..01b0fd9 100644
--- a/public/src/js/silverBox.js
+++ b/public/src/js/silverBox.js
@@ -257,22 +257,21 @@ function silverBox(config = {}) {
 
 		// Select silverBox overlay to give it an eventListener.
 		let silverBoxOverlay = document.querySelectorAll(".silverBox-overlay");
+		silverBoxOverlay = silverBoxOverlay[silverBoxOverlay.length - 1];
 
 		// if the clicked element has classList of silverBox-overlay this code will be executed.
 		if (silverBoxOverlay) {
-			for (const overlay of silverBoxOverlay) {
-				overlay.addEventListener("click", (e) => {
-					// closes the modal if the user clicks on the overlay (outside of the modal).
-					if (e.target === overlay) {
-						silverBoxClose({
-							onClose: config.onClose,
-							element: overlay,
-						});
-					}
-					// checks for silverBox after removing wrapper.
-					silverBoxDisableScroll(".silverBox-overlay");
-				});
-			}
+			silverBoxOverlay.addEventListener("click", (e) => {
+				// closes the modal if the user clicks on the overlay (outside of the modal).
+				if (e.target === silverBoxOverlay) {
+					silverBoxClose({
+						onClose: config.onClose,
+						element: silverBoxOverlay,
+					});
+				}
+				// checks for silverBox after removing wrapper.
+				silverBoxDisableScroll(".silverBox-overlay");
+			});
 		}
 
 		// Checks for silverBox after it's created.

From 87832df4167648fd23e2292e559243e6ef1d5a6e Mon Sep 17 00:00:00 2001
From: Majid Kargar <majidkargar01@gmail.com>
Date: Tue, 12 Sep 2023 20:34:04 +0430
Subject: [PATCH 2/2] feat(silverBox.scss): Add z-index  to silverBox-overlay.

silverBox-overlay is now always under alert modals.
---
 public/src/css/silverBox.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/src/css/silverBox.scss b/public/src/css/silverBox.scss
index 01fd6bf..03d6426 100644
--- a/public/src/css/silverBox.scss
+++ b/public/src/css/silverBox.scss
@@ -31,6 +31,7 @@ body {
 		left: 0;
 		justify-content: center;
 		background-color: var(--silverBox-overlay-background);
+		z-index: calc(var(--silverBox-z-index) - 1);
 	}
 
 	.silverBox {