防止(非引导) Modal弹出窗口在按钮提交后立即关闭，并显示消息

防止(非引导) Modal弹出窗口在按钮提交后立即关闭，并显示消息的方法有多种。以下是一种常见的解决方案：

在按钮点击事件中，首先阻止默认的表单提交行为，以便能够控制弹窗的关闭行为。
在点击按钮后，显示一个加载中的提示，可以是一个加载动画或者文字提示。
在提交按钮的回调函数中，进行异步请求或其他耗时操作。可以使用Ajax发送请求，或者使用Promise进行异步操作。
在异步请求完成后，根据请求结果进行相应的处理。如果请求成功，可以关闭弹窗并显示成功消息；如果请求失败，可以关闭弹窗并显示失败消息。
如果需要延迟关闭弹窗，可以使用setTimeout函数来延迟执行关闭弹窗的操作。

下面是一个示例代码：

// 获取按钮元素
const submitButton = document.getElementById('submit-button');
// 获取弹窗元素
const modal = document.getElementById('modal');

// 监听按钮点击事件
submitButton.addEventListener('click', function(event) {
  // 阻止默认的表单提交行为
  event.preventDefault();

  // 显示加载中提示
  showLoading();

  // 模拟异步请求
  setTimeout(function() {
    // 假设请求成功
    const success = true;

    if (success) {
      // 关闭弹窗并显示成功消息
      closeModal();
      showMessage('提交成功！');
    } else {
      // 关闭弹窗并显示失败消息
      closeModal();
      showMessage('提交失败，请重试！');
    }
  }, 2000); // 假设请求需要2秒钟完成
});

// 显示加载中提示
function showLoading() {
  // 可以在弹窗中显示一个加载动画或文字提示
  // 例如：modal.innerHTML = '加载中...';
}

// 关闭弹窗
function closeModal() {
  // 可以通过修改弹窗的样式来隐藏弹窗
  // 例如：modal.style.display = 'none';
}

// 显示消息
function showMessage(message) {
  // 可以在页面中显示一个消息提示框或者在弹窗中显示消息
  // 例如：alert(message);
}

在这个示例中，我们通过阻止默认的表单提交行为，控制了弹窗的关闭时机。在异步请求完成后，根据请求结果关闭弹窗并显示相应的消息。你可以根据实际需求进行相应的修改和扩展。

关于腾讯云的相关产品和产品介绍，可以参考腾讯云官方文档：腾讯云产品文档。