Question

我是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>

任何人都请帮助我，我是新人，而不是如何继续这一点。

Answer 1

提交表单时使用以下行隐藏。

$('#ouibounce-modal').hide();

Answer 2

当用户提交表单

时使用此行

$('#yourmodal').hide();

Answer 3

引导程序中有一个错误使背景淡入淡出-您可以通过在模式隐藏之后添加以下内容来解决此问题：

$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

如何在表单提交后禁用模式弹出窗口

3 个答案: