2016-04-18 110 views
0

我有一個彈出式窗口,其ID爲#registerModal,其中我有一個表單,當表單提交發生時,我不希望用戶關閉彈出窗口,直到成功消息爲止如圖所示,表單提交是通過AJAX完成的。如何在表單提交時禁用popup撤消

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

我將在提交靜態屬性,但它不工作...

+0

你可以包含模態的基本'html'結構嗎? –

+0

@RinoRaj我已經包含html ... –

+0

你可以嘗試將'submit'按鈕更改爲'

回答

0

如何隱藏的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(); 
     } 
    }); 
}); 
+0

我的模式沒有關閉按鈕.. –

+0

那麼用戶可以通過哪些方式關閉彈出窗口? – Bhumika107

+0

通過單擊外部,一旦用戶填寫完表單並點擊提交..提交功能發生在後端。當時,彈出窗口不應該在點擊外面時解僱.. –