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

这是关闭按钮为cl

时的代码

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

这是bootstrap模式

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

关闭显示成功对话框的Bootstrap模态

1 个答案: