提交前在模态框展示表单求和结果及确认页实现的技术求助

我来帮你搞定这个求和表单的确认模态框需求！咱们一步步来实现：

1. 完善HTML结构 #

首先把表单和模态框的结构补全，模态框默认隐藏，需要的时候再触发显示：

<!DOCTYPE html>
<html>
<head>
    <title>求和确认模态框</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 求和表单 -->
    <form id="sumForm">
        <div>
            <label>数字1：</label>
            <input type="number" name="num1" id="num1" required>
        </div>
        <div>
            <label>数字2：</label>
            <input type="number" name="num2" id="num2" required>
        </div>
        <div>
            <label>数字3：</label>
            <input type="number" name="num3" id="num3" required>
        </div>
        <button type="submit">提交</button>
    </form>

    <!-- 确认模态框 -->
    <div id="confirmModal" style="display: none;">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <h3>请确认求和结果</h3>
            <p>三个数字的总和是：<span id="sumResult"></span></p>
            <button id="confirmSubmit">继续提交</button>
            <button id="cancelSubmit">取消</button>
        </div>
    </div>
</body>
</html>

2. 添加基础CSS样式 #

给模态框加上遮罩和布局样式，让它看起来像个正经的弹窗：

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 1000;
    text-align: center;
}

.modal-content button {
    margin: 0 10px;
    padding: 8px 16px;
    cursor: pointer;
}

3. 核心jQuery逻辑 #

这部分就是你卡住的地方，咱们把逻辑拆解开写：

$(document).ready(function() {
    // 监听表单提交事件，先阻止默认提交行为
    $('#sumForm').submit(function(e) {
        e.preventDefault();
        
        // 获取输入框的值并转为数字
        let num1 = parseInt($('#num1').val());
        let num2 = parseInt($('#num2').val());
        let num3 = parseInt($('#num3').val());
        
        // 计算总和
        let total = num1 + num2 + num3;
        
        // 把结果插入模态框的指定位置
        $('#sumResult').text(total);
        
        // 显示模态框
        $('#confirmModal').show();
    });
    
    // 点击「继续提交」按钮，手动提交表单并隐藏模态框
    $('#confirmSubmit').click(function() {
        $('#sumForm')[0].submit();
        $('#confirmModal').hide();
    });
    
    // 点击「取消」按钮，直接隐藏模态框
    $('#cancelSubmit').click(function() {
        $('#confirmModal').hide();
    });
});

额外优化小技巧 #

• 可以加输入有效性判断，避免出现NaN的情况：

  if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
      alert('请输入有效的数字！');
      return;
  }
  

• 给模态框加淡入淡出动画，把show()换成fadeIn(300)，hide()换成fadeOut(300)
• 点击遮罩层也能关闭模态框，加个事件监听：

  $('.modal-overlay').click(function() {
      $('#confirmModal').fadeOut(300);
  });
  

这样整个流程就通顺了：用户填完数字点提交，弹出模态框显示总和，选继续就提交表单，取消就回到表单页面。

内容的提问来源于stack exchange，提问作者davisoski