Bootstrap 4 - 模態框

上一頁
下一頁

描述

模態框是一個子視窗，層疊在其父視窗之上。它顯示來自獨立來源的內容，可以在不離開父視窗的情況下進行一些互動。

基本模態框

使用.modal 類和屬性data-toggle = "modal" 在元素（例如按鈕或連結）上建立一個模態框，並使用data-target = "#identifier" 或href = "#identifier" 來定位要切換的特定模態框。

以下示例顯示了一個靜態模態視窗：

示例

演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class =" container">
         <h2>Basic Modal</h2>
         <br>
         
         <!-- Button trigger modal -->
         <button type = "button" class = "btn btn-info" data-toggle = "modal" data-target = "#exampleModal">Launch Modal</button>
         
         <!-- Modal -->
         <div class = "modal fade" id = "exampleModal" tabindex = "-1" 
            role = "dialog" aria-labelledby =" exampleModalLabel" aria-hidden = "true">
            <div class = "modal-dialog" role = "document">
               <div class = "modal-content">
                  <div class = "modal-header">
                     <h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
                     <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                        <span aria-hidden = "true">×</span>
                     </button>
                  </div>
                  
                  <div class = "modal-body">
                     Modal Body
                  </div>
                  
                  <div class = "modal-footer">
                     <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
                     <button type = "button" class = "btn btn-success">Save</button>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

垂直居中，使用網格，工具提示和彈出框

您可以透過向.modal-dialog 元素新增.modal-dialog-centered 類來使模態框垂直居中。透過在.modal-body 類中新增.container-fluid 類，在模態框內使用網格系統。您可以透過新增data-toggle="popover" 和data-toggle="tooltip" 屬性來放置工具提示和彈出框。

以下示例演示了上述方法的用法：

示例

演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Vertically centered, Using the Grid, Tooltips and Popovers</h2>
         <br>
         <button type = "button" class = "btn btn-info" data-toggle = "modal" 
            data-target = "#exampleModalGrid">Open Modal</button>
         
         <!-- Modal -->
         <div class = "modal fade" id = "exampleModalGrid" tabindex = "-1" 
            role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true">
            
            <div class = "modal-dialog modal-dialog-centered" role = "document">
               <div class = "modal-content">
                  <div class = "modal-header">
                     <h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
                     <button type = "button" class = "close" data-dismiss = "modal" 
                        aria-label = "Close">
                        
                        <span aria-hidden = "true">×</span>
                     </button>
                  </div>
                  
                  <div class = "modal-body">
                     <h5>Grid system in a modal</h5>
                     <div class = "row">
                        <div class = "col-md-4 bg-primary">class = 'col-md-4'</div>
                        <div class = "col-md-4 bg-success">class = 'col-md-4'</div>
                        <div class = "col-md-4 bg-primary">class = 'col-md-4'</div>
                     </div>
                     <br>
                     
                     <div class = "row">
                        <div class = "col-8 col-sm-6 bg-primary">class = 'col-8 col-sm-6'
                        </div>
                        <div class = "col-4 col-sm-6 bg-success">class = 'col-4 col-sm-6'
                        </div>
                     </div>
                     <hr>
                     
                     <h5>Popover in a modal</h5>
                     <a href = "#" data-toggle = "popover" 
                        title = "Popover in a modal" 
                        data-content = "Popover content inside modal">Click Me For Popover</a>
                     <hr>
                     
                     <h5>Tooltip in a modal</h5>
                     <a href = "#" data-toggle = "tooltip" title = "Tutorialspoint!">Just Hover!</a>
                  </div>
                  
                  <div class = "modal-footer">
                     <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
                     <button type = "button" class = "btn btn-success">Save</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script>
         $(document).ready(function(){
             $('[data-toggle="popover"]').popover();  
              $('[data-toggle="tooltip"]').tooltip();
         });
      </script>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

模態框大小

您可以使用.modal-sm 類建立小型模態框，使用.modal-lg 類建立大型模態框，如下例所示：

示例

演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Modal Size</h2>
         <br>
         
         <!-- Large modal -->
         <button type = "button" class = "btn btn-info" data-toggle = "modal" 
            data-target = ".bd-example-modal-lg">Large modal</button>
         
         <div class = "modal fade bd-example-modal-lg" tabindex = "-1" 
            role ="d ialog" aria-labelledby =" myLargeModalLabel" 
            aria-hidden = "true">
            
            <div class = "modal-dialog modal-lg">
               <div class = "modal-content">
                  
                  <div class = "modal-header">
                     <h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
                     <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                     <span aria-hidden = "true">×</span>
                     </button>
                  </div>
                  
                  <div class = "modal-body">
                     Large Size Modal
                  </div>
                  
                  <div class = "modal-footer">
                     <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
                     <button type = "button" class = "btn btn-success">Save</button>
                  </div>
                  
               </div>
            </div>
         </div>
         
         <!-- Small modal -->
         <button type = "button" class = "btn btn-info" data-toggle = "modal" 
            data-target = ".bd-example-modal-sm">Small modal</button>
         
         <div class = "modal fade bd-example-modal-sm" tabindex = "-1" 
            role = "dialog" aria-labelledby = "mySmallModalLabel" aria-hidden = "true">
            <div class = "modal-dialog modal-sm">
               <div class = "modal-content">
                  
                  <div class = "modal-header">
                     <h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
                     <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                     <span aria-hidden = "true">×</span>
                     </button>
                  </div>
                  
                  <div class = "modal-body">
                     Small Size Modal
                  </div>
                  
                  <div class = "modal-footer">
                     <button type = "button" class = "btn btn-danger" 
                        data-dismiss = "modal">Close</button>
                     <button type = "button" class = "btn btn-success">Save</button>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

不同的模態框內容

您可以有一組按鈕來啟動具有不同內容的模態框。使用event.relatedTarget（返回元素的相關目標）屬性和HTML data-* 屬性根據單擊的按鈕顯示內容。

以下示例演示了這一點：

示例

演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Varying Modal Content</h2>
         <br>
         
         <button type = "button" class = "btn btn-info" data-toggle = "modal" 
            data-target = "#exampleVaryingModal1" data-whatever = "John Doe">
            Recipient: John Doe</button>
         
         <button type = "button" class = "btn btn-info" data-toggle = "modal" 
            data-target = "#exampleVaryingModal1" data-whatever = "Will Smith">
            Recipient: Will Smith</button>
         
         <button type = "button" class = "btn btn-info" data-toggle = "modal" 
            data-target = "#exampleVaryingModal1" data-whatever = "Dwayne Johnson">
            Recipient: Dwayne Johnson</button>
         
         <div class = "modal fade" id = "exampleVaryingModal1" tabindex = "-1" 
            role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true">
            
            <div class = "modal-dialog" role = "document">
               <div class = "modal-content">
                  
                  <div class = "modal-header">
                     <h5 class = "modal-title" id = "exampleModalLabel">New message</h5>
                     <button type = "button" class = "close" data-dismiss = "modal" 
                        aria-label = "Close">
                        
                        <span aria-hidden = "true">×</span>
                     </button>
                  </div>
                  
                  <div class = "modal-body">
                     <form>
                        <div class = "form-group">
                           <label for = "recipient-name" class = "col-form-label">
                              Recipient:</label>
                           <input type = "text" class = "form-control" id = "recipient-name">
                        </div>
                        
                        <div class = "form-group">
                           <label for = "message-text" class = "col-form-label">Message:</label>
                           <textarea class = "form-control" id = "message-text"></textarea>
                        </div>
                     </form>
                  </div>
                  
                  <div class = "modal-footer">
                     <button type = "button" class = "btn btn-danger" 
                        data-dismiss = "modal">Close</button>
                     
                     <button type = "button" class = "btn btn-success">Send</button>
                  </div>
               </div>
               
            </div>
         </div>
      </div>
      
      <script>
        $(document).ready(function(){
            $('#exampleVaryingModal1').on('show.bs.modal', function (event) {
               var button = $(event.relatedTarget) // Button that triggered the modal
               var recipient = button.data('whatever') // Extract info from data-* attributes
               // We are jquery here to update the modal's content
               var modal = $(this)
               modal.find('.modal-title').text('New message to ' + recipient)
               modal.find('.modal-body input').val(recipient)
            })    
         });
      </script>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

bootstrap4_components.htm
列印頁面
上一頁
下一頁
廣告