表單提交時調用BS Modal

這是我的頁面，表單提交後如何獲取模態。表單提交時調用BS Modal

我想要得到Modal，因爲我需要做這樣的工作。這只是我理解的簡單實踐模態頁面。

<?php 
    if(isset($_POST["btn"]) && $_POST["btn"]=="Submit") 
    { 
     ?> 
     <script type="text/javascript"> 
     $(window).load(function() 
     { 
     $('#myModal').modal('show'); 
     }); 
     </script> 
     <?php 
    } 
    ?> 

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <div class="container"> 
     <h2>Modal Example</h2> 

    <!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> --> 
     <form method="post"> 
       <div class="col-sm-4"> 
       <input type="text" name="text" class="form-control"> <br> 
       <input type="submit" name="btn" class="btn btn-danger"> 
       </div> 
     </form> 
     <!-- Modal --> 
     <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 


<div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
      </div> 

     </div> 
     </div> 

    </div> 
    </body> 
    </html>

來源

2017-02-16 chgav007

你不能在表單提交中使用「event.preventDefault（）」嗎？ –

首先不包括html標籤外<script>標籤，把它們在<body>或<head>標記中。無論何時使用DOM和jQuery，請將代碼包裝在document ready closure中。例如：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#myModal').modal('show'); 
    }); 
</script>

來源

2017-02-19 06:24:55 Pablo

非常感謝您提供必要的細節。我的代碼以我想要的方式正常工作。現在我期待着在我的項目中實施它。 – chgav007

您需要將您的jQuery放置在HTML中的模態定義之後因爲您無法在HTML頁面和模態定義之前顯示BS模態。

此外，表單提交按鈕的POST響應是「提交查詢」，而不僅僅是「提交」。

從模式定義把最後</div>標籤下的以下PHP和該</body>標籤之前，它會工作：

<?php 

    if(isset($_POST["btn"]) && $_POST["btn"]=="Submit Query") 
    { 
     ?> 
      <script type="text/javascript"> 
       $('#myModal').modal('show'); 
      </script> 
     <?php 
    } 
?>

來源

2017-02-16 09:35:44

感謝您的迴應。但它實際上不適合我。請你能提出其他方法嗎？ – chgav007

請參閱我的編輯。您還需要刪除IF部分並將jQuery放入HTML代碼中。它會工作。 –

哦，是的，抱歉這是我的錯誤。正如你現在建議它正在工作。謝謝。但是，只有一個問題是模態不能持久，而且它會像提交一樣消失。你能否請進一步告訴我，我該如何保持這種模式，或者我必須使用AJAX調用？ – chgav007

表單提交時調用BS Modal

回答

相關問題