Bootstrap模式沒有隱藏（ASP.NE MVC）

我有一些輸入和按鈕的引導模式。Bootstrap模式沒有隱藏（ASP.NE MVC）

這裏是代碼

<div class="modal fade" id="myModal2" role="dialog" data-backdrop="false"> 
<div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
      <h4 class="modal-title">Добавить получателя</h4> 
     </div> 
     <div class="modal-body"> 
      <script async="" src="https://www.google-analytics.com/analytics.js"></script> 
      <script src="/lib/jquery/dist/jquery.js"></script> 
      <script src="/Scripts/jquery-ui-1.12.1.js"></script> 
      <div> 
       <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
        <input type="text" class="form-control" id="email2" ,="" placeholder="Email"> 
       </div> 
       <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
        <input type="text" class="form-control" id="name2" ,="" placeholder="Ф.И.О"> 
       </div> 
       <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
        <input type="text" class="form-control" id="telephone2" ,="" placeholder="Телефон"> 
       </div> 
       <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
        <input type="text" class="form-control" id="profession2" ,="" placeholder="Ваша профессия"> 
       </div> 
       <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
        <input type="text" class="form-control" id="Comment2" ,="" placeholder="Комментарий"> 
       </div> 
       <div class="form-group" style="text-align:center"> 
        <input type="button" id="send_mail2" value="Отправить" class="btn btn-default" style="margin-right: 40px;"> 
       </div> 
      </div> 


     </div> 
    </div> 

</div>

當我點擊按鈕，腳本發送Ajax請求，並在後端方法發送電子郵件到收件人。

這裏是JS腳本：

<script> 
$(document).ready(function() { 
    $('#send_mail2').click(function() { 
     send_email2(); 
    }); 
}); 
function send_email2() { 

    $.ajax({ 
     type: 'Post', 
     dataType: 'Json', 
     data: { 
      From2: $('#email2').val(), 
      Name2: $('#name2').val(), 
      Telephone2: $('#telephone2').val(), 
      Profession2: $('#profession2').val(), 
      Comment2: $('#Comment2').val(), 
     }, 
     url: '@Url.Action("SendEmail2", "Home")', 
     success: function (da) { 
      if (da.Result === "Success") { 
       alert("Sucess"); 
       //$("#myModalDoctors").modal(); 
       $("#myModal2").modal("hide"); 
      } else { 

       alert('Error' + da.Message); 
      } 
     }, 
     error: function (da) { 
      alert('Error'); 
     } 
    }); 
}

與後端都很好，而且戒備工作。但莫代爾並沒有隱藏起來。哪裏可以麻煩？

我也試過$("#myModal2").modal('hide');，它不工作。

來源

2017-08-29 mark_spencer

爲什麼你在模態模板中包含jquery.js和jqueryui js文件？ – Rahul

你是如何展示它的？你是通過'modal（'show'）'顯示它嗎？ –

在控制檯中是否出現錯誤？ – Rahul

這是代碼，它的工作。可能你的ajax調用不會觸發成功回調。

<!DOCTYPE html> 
<html> 

<head> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="description" content="Fullscreen backgrounds with centered content"> 
</head> 

<body> 
<button type="button" data-toggle="modal" data-target="#myModal2">Open Modal</button> 
    <div class="modal fade" id="myModal2" role="dialog" data-backdrop="false"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">×</button> 
        <h4 class="modal-title">Добавить получателя</h4> 
       </div> 
       <div class="modal-body"> 
        <script async="" src="https://www.google-analytics.com/analytics.js"></script> 
        <div> 
         <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
          <input type="text" class="form-control" id="email2" ,="" placeholder="Email"> 
         </div> 
         <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
          <input type="text" class="form-control" id="name2" ,="" placeholder="Ф.И.О"> 
         </div> 
         <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
          <input type="text" class="form-control" id="telephone2" ,="" placeholder="Телефон"> 
         </div> 
         <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
          <input type="text" class="form-control" id="profession2" ,="" placeholder="Ваша профессия"> 
         </div> 
         <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;"> 
          <input type="text" class="form-control" id="Comment2" ,="" placeholder="Комментарий"> 
         </div> 
         <div class="form-group" style="text-align:center"> 
          <input type="button" id="send_mail2" value="Отправить" class="btn btn-default" style="margin-right: 40px;"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#send_mail2').click(function() { 
      $("#myModal2").modal("hide"); 
     }); 
    }); 

    </script> 
</body> 

</html>

來源

2017-08-29 11:16:36 Rakib

但警報正在工作 –

您是否嘗試過上述代碼？它正在工作（我的意思是關閉模式），當點擊send_email按鈕 – Rakib

現在就試試吧 –

Bootstrap模式沒有隱藏（ASP.NE MVC）

回答

相關問題