JavaScript 如何隐藏Bootstrap模态框

本文将介绍Bootstrap在关闭 .modal （模态窗口）时的执行情况。无论何时，只要模态窗口（带有modal类）被打开，都会被关闭。在模态窗口隐藏后，会触发事件并执行函数，同时会触发下面的语法，随之模态窗口将立即消失。值得注意的是，这一切都由Bootstrap库自动完成，用户无需干预。

下面的语法将在Bootstrap模态窗口即将被隐藏或隐藏时使用。

语法：

hide.bs.modal

示例: 这个示例展示了 hide.bs.modal 的使用方法。

<!DOCTYPE html> 
<html> 
  
<head> 
    <h2 style="color:green"> 
      GeeksForGeeks 
  </h2> 
    <h2 style="color:purple"> 
      Hide Bootstrap Modal 
  </h2> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet"
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
  </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
  </script> 
    <style> 
        #myBtn { 
            width: 300px; 
            padding: 10px; 
            font-size: 20px; 
            position: absolute; 
            margin: 0 auto; 
            right: 0; 
            left: 0; 
            bottom: 50px; 
            z-index: 9999; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <div class="container"> 
        <h2>Modal Events - hide.bs.modal</h2> 
        <!-- Trigger the modal with a button -->
        <button type="button"
                style="color:brown"
                class="btn btn-info btn-md" 
                id="myBtn"> 
          Hide Modal 
      </button> 
        <!-- 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"> 
                          × 
                        </button> 
                        <h4 class="modal-title"> 
                          Modal Header: GeeksForGeeks 
                        </h4> 
                     </div> 
                     <div class="modal-body"> 
                        <p>The <strong>hide.bs.modal</strong>  
                          is going to hide the modal.</p> 
                        <p>If you wish to trigger the modal and  
                          see the modal get hidden, then press 
                          the <strong>'HIDE MODAL'</strong> button. 
                       </p> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
         $(document).ready(function() {$ ("#myModal").modal("show"); 
  
             $("#myBtn").click(function() {$ ("#myModal").modal("hide"); 
            }); 
  
            $("#myModal").on('hide.bs.modal', function() { 
                alert('The modal is about to be hidden.'); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

输出：

当我们加载代码时：

JavaScript 如何隐藏Bootstrap模态框