解决非Bootstrap登录Modal提交后立即关闭且无法显示提示问题

我明白你的痛点——表单提交后页面直接刷新，弹窗跟着关闭，用户连提示消息都来不及看。核心问题是默认的表单提交会触发页面跳转，咱们改用AJAX异步处理登录请求，就能让弹窗保持打开直到用户看完提示。下面是具体的修改方案：

步骤1：给登录表单添加ID（方便JS获取） #

修改你的HTML表单，给它加一个唯一ID：

<form action="" class="woocommerce-form woocommerce-form-login login" method="post" id="login-modal-form">

步骤2：修改JavaScript，添加AJAX登录逻辑 #

替换/补充你的JS代码，阻止默认表单提交，改用AJAX发送请求：

// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_login_popup");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
var pasw = document.getElementById("retrieve_pasw");
var pasw_form = document.getElementById("modal-body_b");

// When the user clicks on the button, open the modal
if (btn2) {
 btn2.onclick = function() {
 modal2.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function(event) {
 modal2.style.display = "none";
}

pasw.onclick = function(event) {
 pasw_form.style.display = "block";
}

// 新增：监听登录表单提交事件
document.getElementById('login-modal-form').addEventListener('submit', function(e) {
  // 阻止默认表单提交（避免页面刷新）
  e.preventDefault();

  // 收集表单所有数据
  const formData = new FormData(this);
  // 告诉WordPress这是登录请求
  formData.append('action', 'woocommerce_modal_login');

  // 发送AJAX请求到WordPress后台
  fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 找到或创建提示消息容器（对应原来的wc_print_notices位置）
    let noticeContainer = modal2.querySelector('.woocommerce-notices-wrapper');
    if (!noticeContainer) {
      noticeContainer = document.createElement('div');
      noticeContainer.className = 'woocommerce-notices-wrapper';
      // 插入到Modal头部下方
      const modalHeader = modal2.querySelector('.modal-header_a');
      modalHeader.parentNode.insertBefore(noticeContainer, modalHeader.nextSibling);
    }

    // 清空旧提示
    noticeContainer.innerHTML = '';

    if (data.success) {
      // 登录成功：显示成功消息，延迟1.5秒关闭弹窗
      noticeContainer.innerHTML = `<div class="woocommerce-message" role="alert">${data.message}</div>`;
      setTimeout(() => {
        modal2.style.display = 'none';
        // 可选：登录成功后刷新页面或跳转到用户中心
        window.location.reload();
      }, 1500);
    } else {
      // 登录失败：显示错误消息，弹窗保持打开
      noticeContainer.innerHTML = `<div class="woocommerce-error" role="alert">${data.message}</div>`;
    }
  })
  .catch(error => {
    // 请求出错时提示
    let noticeContainer = modal2.querySelector('.woocommerce-notices-wrapper');
    if (!noticeContainer) {
      noticeContainer = document.createElement('div');
      noticeContainer.className = 'woocommerce-notices-wrapper';
      const modalHeader = modal2.querySelector('.modal-header_a');
      modalHeader.parentNode.insertBefore(noticeContainer, modalHeader.nextSibling);
    }
    noticeContainer.innerHTML = `<div class="woocommerce-error" role="alert">登录请求出错，请稍后重试。</div>`;
  });
});

步骤3：在主题functions.php添加AJAX处理函数 #

需要后台验证登录信息并返回结果，把这段代码加到你的主题functions.php里：

// 处理登录Modal的AJAX请求（登录用户）
add_action('wp_ajax_woocommerce_modal_login', 'custom_modal_login_handler');
// 处理未登录用户的AJAX请求
add_action('wp_ajax_nopriv_woocommerce_modal_login', 'custom_modal_login_handler');

function custom_modal_login_handler() {
  // 验证安全nonce
  if (!isset($_POST['woocommerce-login-nonce']) || !wp_verify_nonce($_POST['woocommerce-login-nonce'], 'woocommerce-login')) {
    wp_send_json_error(array('message' => __('安全验证失败，请重试。', 'woocommerce')));
  }

  // 清理并获取登录数据
  $username = sanitize_text_field($_POST['username']);
  $password = sanitize_text_field($_POST['password']);
  $remember = isset($_POST['rememberme']) ? true : false;

  // 调用WordPress原生登录函数
  $user_login_result = wp_signon(array(
    'user_login' => $username,
    'user_password' => $password,
    'remember' => $remember
  ), false);

  if (is_wp_error($user_login_result)) {
    // 登录失败，返回错误消息
    wp_send_json_error(array('message' => $user_login_result->get_error_message()));
  } else {
    // 登录成功，返回成功消息
    wp_send_json_success(array('message' => __('登录成功！即将跳转...', 'woocommerce')));
  }

  wp_die(); // 必须结束AJAX请求
}

为什么这样改？ #

1. 阻止页面刷新：通过e.preventDefault()取消表单默认提交行为，避免弹窗因页面跳转关闭
2. 异步请求：用AJAX把登录数据发送到后台，页面保持不动，弹窗持续显示
3. 动态提示：根据后台返回的结果，在Modal内显示对应的成功/错误消息，登录成功时延迟关闭弹窗，让用户有时间查看
4. 安全验证：保留了Woocommerce的nonce验证，确保请求安全

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