確認視窗的第二彈來啦！在之前的「Limesurvey進階應用」系列中，我們利用javascript內建的confirm功能做了彈出確認視窗，可參考Limesurvey進階應用--數值題範圍設定與彈出確認視窗。但由於confirm視窗的功能較為受限，內容只能以純文字呈現，按鈕文字也是固定的不能修改。做為重要的提示功能，我們總希望可以自由調整視窗及文字的大小、顏色，讓內容更醒目；同時自訂按鈕的樣式，讓填答者的操作更直覺，本篇文章就來實現這個想法。

情境說明

為了方便相互比較對照，本篇文章與之前使用confirm功能的文章採用相同的例子。但為了方便各位閱讀，在此仍然重述設計情境。
在設計問卷時，設計一個文字框，請填答者輸入數字或文字是很常見的題型。對於數字輸入，我們最擔心的就是胖手指問題，多一個0，少一個0都嚴重影響資料的正確性。因此，對於這類題型，我會想要設計提醒，當數值可疑時，提醒填答者注意。但由於只是提醒，並不代表不能輸入，因此我希望可以在題目中以醒目的方式提示填答者，但若資料正確，仍然可以接受答案。
這篇文章我將以數值題說明設計方式，其實對於文字題、或多題之間的關係也可以做類似設計，只要調整顯示的條件及內容即可，不過這暫時不在這篇文章的討論範圍內。
以下將以 「請問您每個月的工作收入大約多少元？元」 為例說明相關設定。
並希望在輸入數值介於1,000~20,000以及超過10萬時，提示受訪者確認金額的正確性。

自訂彈出確認視窗

我們採用DIV+CSS並配合javascript做出此效果。當填答者輸入金額並點選「下一頁」提交此題答案時進行檢查。若輸入金額在1,000~20,000或超過10萬時，彈出視窗與受訪者確認。彈出視窗包含兩個按鈕，「金額正確」提交資料進入下一題，「金額錯誤」則回到原畫面讓填答者修改答案。
首先，我們先吧彈出視窗的樣子用CSS做出來，語法如下：

<style type="text/css">/* 自訂模組框的樣式 */
  /* 彈出視窗的背景遮罩 */
.popup-overlay {
    display: none; /* 初始隱藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 彈出視窗內容樣式 */
.popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1001;
}

/* 彈出視窗按鈕 */
.popup-button {
    margin-top: 15px;
    padding: 8px 12px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.button-correct {
    background-color: #4CAF50;
    color: white;
    margin-right: 10px;
}

.button-incorrect {
    background-color: #f44336;
    color: white;
}
</style>

在上面的語法中，我們設置了彈出視窗的大小底色及字體顏色，同時也設置了兩個按鈕，正確按鈕為綠底白字，錯誤按鈕為紅底白字以茲區別。

接著，我們用DIV設置彈出視窗的內容。

<div class="popup-overlay" id="popupOverlay">
<div class="popup-content">
<p>您輸入的金額是 __ 元，__，請問是否正確？</p>
<button class="popup-button button-correct" id="popupCorrect">金額正確</button><button class="popup-button button-incorrect" id="popupIncorrect">金額錯誤</button></div>
</div>

在彈出視窗中，我們希望呈現的內容是「您輸入的金額是XX元，小於2萬/超過10萬，請問是否正確。在語法中，我們留了兩個動態欄位，將用javascript帶入內容。最後兩個按鈕的文字則分別為「金額正確」及「金額錯誤」。

最後的重頭戲就是控制整個程序的javascript了。

<script type="text/javascript">
  $(document).ready(function() {
        // 監聽「下一頁」按鈕的點擊事件
    $('#ls-button-submit').on('click', function(e) {
        var value = $('#answer{self.sgqa}').val(); // 取得輸入框中的值

        // 檢查是否超過 10 萬元
        if (value >= 100000 || (value >=1000 && value<=20000)) {
            // 阻止表單提交，先處理確認
            e.preventDefault();

            // 彈出確認框詢問是否正確
          var checkInfo;
          if (value>=100000) {
            checkInfo = "<span style='color: red;'>超過10萬元</span>";
          } else {
            checkInfo = "<span style='color: red;'>小於2萬元</span>";
          }
			$('.popup-content p').html("您輸入的金額是 " + value + " 元，" + checkInfo + "，請問是否正確？");
            $('#popupOverlay').fadeIn(); // 顯示彈出視窗
        }
    });
    
     // 「金額正確」按鈕的點擊事件
   $('#popupCorrect').on('click', function() {
    $('#popupOverlay').fadeOut(); // 隱藏彈出視窗
    $('#ls-button-submit').off('click'); // 先移除先前綁定的點擊事件
        // 模擬提交表提交表單
    $('<input>').attr({
        type: 'hidden',
        name: 'move',
        value: 'movenext'
    }).appendTo('form'); 

    $('#ls-button-submit').closest('form').submit(); 
});
        // 「金額錯誤」按鈕的點擊事件
$('#popupIncorrect').on('click', function(e) {
    e.preventDefault(); 

    
    $('input[name="move"][value="movenext"]').remove();

    $('#popupOverlay').fadeOut(); 
    $('#answer{self.sgqa}').focus(); 
});
   });
</script>

程式說明如下：

1. 首先建立變數value並取得填答者輸入的數值。
2. 檢查value是否符合我們設定的彈出條件，若符合，則以 "e.preventDefault();" 將提交動作停止。
3. 建立checkInfo變數，根據數值設定提示文字，為了讓文字醒目，我們將這段提示文字改為紅色。
4. 將內容組合，帶入DIV內容之中，並顯示彈出視窗。
5. 處理「金額正確」按鈕的動作：這邊算是一個比較複雜的狀況，相對於使用confirm時，我們只要用"$('#ls-button-submit').click();" 即可送出表單，在這裡卻無效。後來，我們觀察了「下一頁」按鈕的內容：

<button id="ls-button-submit" type="submit" value="movenext" name="move" accesskey="n" class="   ls-move-btn ls-move-next-btn ls-move-submit-btn action--ls-button-submit  btn btn-lg btn-primary ">
                    下一頁
                </button>

發現按鈕除了「type="submit"」外，還帶了「value="movenext"」及「name="move"」。這代表在提交時，Limesurvey可能還有其他邏輯需同步執行。因此我們必須同步把value及name的資訊送出，才能順利提交。
6. 處理「金額錯誤」按鈕的動作：這部分則相對單純，我們只需阻止提交或reload，並關閉彈出視窗，回到原畫面即可。
最後，我們來看一下效果截圖吧！