防止(非引导) Modal弹出窗口在按钮提交后立即关闭,并显示消息的方法有多种。以下是一种常见的解决方案:
下面是一个示例代码:
// 获取按钮元素
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);
}
在这个示例中,我们通过阻止默认的表单提交行为,控制了弹窗的关闭时机。在异步请求完成后,根据请求结果关闭弹窗并显示相应的消息。你可以根据实际需求进行相应的修改和扩展。
关于腾讯云的相关产品和产品介绍,可以参考腾讯云官方文档:腾讯云产品文档。
领取专属 10元无门槛券
手把手带您无忧上云