Popup statt Modal ,um die Koordinaten zu kopieren

components/CoordinatePopup.js

@@ -6,27 +6,37 @@ const CoordinatePopup = ({ isOpen, coordinates, onClose }) => {
 
   return (
     <div
-      className="absolute z-50 bg-white p-4 rounded-lg shadow-lg"
+      className="fixed inset-0 bg-black bg-opacity-30 flex justify-center z-50"
+      onClick={onClose} // Schließt das Popup, wenn der Hintergrund angeklickt wird
       style={{
-        top: "10%", // Zentriert oben, ca. 10% von oben
-        left: "50%",
-        transform: "translateX(-50%)", // Horizontale Zentrierung
+        alignItems: "flex-start", // Positioniert das Popup oben
+        paddingTop: "5px", // Abstand von oben
       }}
     >
-      <h2 className="text-lg font-bold mb-2">Koordinaten</h2>
-      <p className="mb-4">{coordinates}</p>
-      <button
-        onClick={() => {
-          navigator.clipboard.writeText(coordinates);
-          alert("Koordinaten kopiert!");
+      <div
+        className="bg-white p-4 rounded-lg shadow-xl"
+        style={{
+          width: "300px",
         }}
-        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        onClick={(e) => e.stopPropagation()} // Verhindert das Schließen, wenn innerhalb des Popups geklickt wird
       >
-        Kopieren
-      </button>
-      <button onClick={onClose} className="mt-2 bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">
-        Schließen
-      </button>
+        <h2 className="text-xl font-bold text-center mb-4 text-gray-800">Koordinaten</h2>
+        <p className="text-center text-lg text-gray-600 font-mono mb-6">{coordinates}</p>
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText(coordinates);
+              alert("Koordinaten kopiert!");
+            }}
+            className="bg-blue-500 text-white px-6 py-2 rounded-lg shadow hover:bg-blue-600 transition-all"
+          >
+            Kopieren
+          </button>
+          <button onClick={onClose} className="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg shadow hover:bg-gray-400 transition-all">
+            Schließen
+          </button>
+        </div>
+      </div>
     </div>
   );
 };