Bootstrap modal on close, показывающий диалог успеха

Question

У меня есть мода, загружаемая с помощью формы, в которой я отправляю форму, тогда я скрываю содержимое формы и показывая сообщение об ошибке загрузки. После этого, когда я нажимаю всплывающее окно bootstrap, он показывает одно и то же сообщение с бутстрапом только во всплывающем окне. Я хочу, чтобы пользователь увидел модальную форму.

$(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'); 
      } 
     }); 
    }); 
}); 

Это код, когда кнопка закрытия находится сла

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

Вот бутстраповское модальный

<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

Вы должны показать форму и скрыть предупреждение при начальной загрузке модальный. Для этого вы можете использовать следующий код. Для этой цели используется событие shown.bs.modal.

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