Question

我有一个标识为#registerModal的弹出框，其中我有一个表单，当表单提交发生时我不希望用户关闭弹出窗口，直到显示成功消息，表单提交是通过AJAX完成的。

$('form#register-form').on('submit', function(event) {
  $.ajax({
    type: "POST",
    url: "/user-register",
    data: {
      'first_name': first_name,
      'second_name': second_name,
      'email': email
    },
    $("#registerModal").modal({
      "backdrop": "static"
    });
    success: function(data) {}
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<a data-toggle="modal" data-target="#registerModal" class="register">GET STARTED</a>


<div id="registerModal" class="modal fade modal-white" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel">
  <div class="modal-dialog" style="margin-top: 10%;">
    <div class="modal-content">
      <div class="modal-body">
        <div id="register-success-message" class="alert alert-success fade in">
          <a href="#" id="register-alert-close" class="close" data-dismiss="modal" aria-label="close" title="close">×</a>
          <strong>Success!</strong> An activation mail has been sent.
        </div>
        <div class="row" id="register-modal-form">
          <div class="col-sm-8 col-sm-offset-2 register-heading">
            <center> REGISTER </center>
          </div>
          <form method="POST" action="/user-register" id="register-form">
            <div id="status-message"></div>
            <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
              <input type="text" class="form-control register-fields" id="first_name" name="first_name" placeholder="First Name" autocomplete="off" />
              <span id="first-name-register-error-message" class="register-error-message"></span>
            </div>
            <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
              <input type="text" class="form-control register-fields" id="second_name" name="second_name" placeholder="Last Name" autocomplete="off" />
              <span id="second-name-register-error-message" class="register-error-message"></span>
            </div>
            <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
              <input type="text" class="form-control register-fields" id="register_email" name="email" placeholder="Email" autocomplete="off" />
              <span id="email-register-error-message" class="register-error-message"></span>
            </div>
            <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
              <input type="hidden" name="_token" value="{{ csrf_token() }}">
              <input name="register-submit" type="submit" id="register-form-submit" class="btn btn-danger pull-left btn-lg register-button" value="CONTINUE" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

我在提交时已经包含静态属性，但它无法正常工作......

Answer 1

如何隐藏jquery modal关闭按钮并在成功事件触发ajax后显示

$('form#register-form').on('submit', function(event) {
    $.ajax({
        type: "POST",
        url: "/user-register",
        data: {
            'first_name': first_name,
            'second_name': second_name,
            'email': email
        },
        $("#registerModal").modal({
            "backdrop": "static"
        });
        $(".ui-dialog-titlebar-close").hide();
        success: function(data) {
            $(".ui-dialog-titlebar-close").show();
        }
    });
});

如何在表单提交时禁用弹出窗口关闭

1 个答案: