彈出弄一半

static/spa.js

@@ -50,6 +50,25 @@ function init() {
             }
         }
 
+        // 檢查是否點擊了彈出按鈕
+        if (event.target.closest('.pop-out, .pop-out *')) {
+            const card = event.target.closest('.card');
+            card.classList.toggle('popped-out');
+
+            if (card.classList.contains('popped-out')) {
+                // 設置彈出狀態的樣式
+                card.style.position = 'absolute';
+                card.style.zIndex = '3'; // 確保彈出卡片在其他卡片上方，但在添加圖片模態窗口下方
+                card.style.left = '50%'; // 可以調整位置以適應需求
+                card.style.top = '50%';
+                card.style.transform = 'translate(-50%, -50%)'; // 居中
+            } else {
+                // 復原到正常狀態的樣式
+                card.style.position = 'absolute';
+                card.style.zIndex = '2';
+            }
+        }
+
         // 根據點擊的是哪個按鈕，執行相應的操作
         if (event.target.matches('.delete, .delete *')) { // 匹配刪除按鈕或其內部的元素
             pckry.remove(card);
@@ -261,6 +280,13 @@ function addImageWithUrl(imageUrl) {
     buttonsContainer.style.left = '0';
     buttonsContainer.style.zIndex = '1';
 
+    // 創建彈出按鈕
+    const popOutBtn = document.createElement('button');
+    popOutBtn.className = 'button pop-out';
+    popOutBtn.innerHTML = '<i class="ti ti-layers-subtract"></i>'; // 假設這是彈出圖示
+    buttonGroupVertical.appendChild(popOutBtn); // 添加到垂直按鈕組
+
+
 
     // 創建圖片元素
     const img = document.createElement('img');

static/style.css

@@ -95,7 +95,7 @@ header h1 {
   /* Hidden by default */
   position: fixed;
   /* Stay in place */
-  z-index: 3;
+  z-index: 4;
   /* Sit on top */
   left: 0;
   top: 0;