Bootstrap 模式在页面加载时自动打开，但如果提交表单如何禁用

Question

我有一个时事通讯模式设置，效果很好。我通过一些 javascript 代码将它设置为在页面加载时自动启动，但是如果你在模态中成功提交表单，我如何才能让它不打开？

Javascript:

<script type="text/javascript">
    $(window).on('load', function() {
        $('#newsletter-modal').modal('show');
    });
</script>

HTML 模态代码：

<div class="modal fade" id="newsletter-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content primary-modal">
          <div class="modal-header">
              <h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body primary-modal-body">
          <form method="post" action="">
            <div class="col-sm-12">
                <div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
                    <label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
                    <input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
                  </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
                    <label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
                    <input type="email" class="form-control" placeholder="johndoe123@gmail.com" name="newsletter_email">
                  </div>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
            </div>
          </form>
        </div>
      </div>
  </div>
</div>

Answer 1

通过在 PHP 中执行此操作，您可以防止人们乱用 'client-side'.

的 JS

此外，您只能在订阅有效时设置 cookie，即在您验证电子邮件等之后。

在页面上PHP

if (isset($_POST['newsletter_email'])) {
   //you subscribe stuff here
   $_SESSION['subscribed']=true;
}

然后将模态 js 包裹在

if (!isset($_SESSION['subscribed']))  {
    ///output your onload js.
}

Answer 2

勾选这个对你有帮助：

Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click

Bootstrap 模式在页面加载时自动打开，但如果提交表单如何禁用

Bootstrap modal opens automatically on page load, but how to disable if form is submitted

javascript

php

modal-dialog