我对JavaScript和frontEnd很陌生，我正在尝试构建一个要求表单提交的模态弹出窗口。现在我要做的是在用户单击提交按钮后立即隐藏弹出窗口。
function openColorBox(){
$.colorbox({iframe:true, width:"50%", height:"50%", href: "new_greeting_form.html"});
}
setTimeout(openColorBox, 5000);
</script>
<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { }
});
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
<link rel="stylesheet" href="ouibounce.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script src="ouibounce.js"></script>
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3> </h3>
</div>
<div class="modal-body">
<h2>ThankYou for coming!!</h2>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
</html>任何人请帮我，我是新手，不知道如何继续。
引导程序中有一个错误，使背景淡入淡出 - 您可以通过在模态隐藏后添加以下内容来解决此问题：
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
当用户提交表单时使用此行
$('#yourmodal').hide();
提交表单时，请使用以下行进行隐藏。
$('#ouibounce-modal').hide();