关闭时显示Bootstrap模式，显示成功对话框

Question

I've a bootstrap modal with a form, in which I submit the form then I'm hiding the form content and showing a bootstrap alert message. After that when I click the bootstrap popup it is showing the same bootstrap alert message only in the popup. I want the user to see the modal with form instead.

    $(document).ready(function() { 
  $('form#register-form').on('submit', function(event) {
        event.preventDefault();
        var first_name = $('#first_name').val();
        var second_name = $('#second_name').val();
        var email = $('#register_email').val();
        $('#register-form-submit').attr('disabled', 'disabled');
        $.ajax({
            type: "POST",
            url: "/user-register",
            data: {'first_name': first_name, 'second_name': second_name, 'email': email},
            success: function(data) {
                $('#register-form-submit').removeAttr('disabled');
                if (data) {
                  if (data.status) {
                      var message = data.message;
                      $("form#register-form").trigger('reset');
                      $('input[id=first_name]').removeClass('error-message-register');
                      $('input[id=second_name]').removeClass('error-message-register');
                      $('input[id=register_email]').removeClass('error-message-register');
                      $('#register-form-submit').removeAttr('disabled');
                      if (data.status == '2') {
                        $('#registerModal').modal('hide');
                        $('#successModal').modal('show');

                      }
                      else {
                        $("div#status-message").hide().html('<center>' + message + '</center>').show();
                        $("div#status-message").css('color', 'red');
                      }
                  }
                  else {
                      if (data.first_name) {
                        $('input[id=first_name]').addClass('error-message-register');
                      }
                      else {
                        $('input[id=first_name]').removeClass('error-message-register');
                      }
                      if (data.second_name) {
                        $('input[id=second_name]').addClass('error-message-register');
                      }
                      else {
                        $('input[id=second_name]').removeClass('error-message-register');
                      }
                      if (data.email) {
                        $('input[id=register_email]').addClass('error-message-register');
                      }
                      else {
                        $('input[id=register_email]').removeClass('error-message-register');
                      }
                  }
                }
            },
            error: function() {
                $("div#register-success-message").html('<center> Server Error. </center>').show();
                $("div#register-success-message").css('color', 'red');
                $('#register-form-submit').removeAttr('disabled');
            }
        });
    }); 
});

This is the code when the close button is cl

$('#register-alert-close').on('click', function(e) {
        alert('it is here');
        $('#registerModal').dismiss();
    });

Here is the bootstrap modal

<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" style="display:none">
                <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="Full 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

You have to show the form and hide the alert message when the bootstrap modal is shown. You can use the following code to achieve that. shown.bs.modal event is used for that purpose.

$(document).ready(function() {
    $('#registerModal').on('shown.bs.modal', function() {
        $('#register-modal-form').css('display', 'block');
        $("div#register-success-message").css('display', 'none');
    })
});