模態框是覆蓋在父窗體上的子窗體。通常，目的是顯示來自單獨的來源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊互動等。
例如，透過點擊按鈕開啟模態方塊。 （推薦學習：Bootstrap影片教學）
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>模态框实例</h2> <!-- 按钮：用于打开模态框 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态框头部 --> <div class="modal-header"> <h4 class="modal-title">模态框头部</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- 模态框主体 --> <div class="modal-body"> 模态框内容.. </div> <!-- 模态框底部 --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> </div> </div> </div> </div> </div> </body> </html>
我們可以透過加入 .modal-sm 類別來建立小模態框，.modal-lg 類別可以建立一個大模態框。
尺寸類別放在在尺寸上放在「div>元素的 .modal-dialog 類別後:
更多Bootstrap相關技術文章，請訪問Bootstrap教學欄位進行學習！
以上是bootstrap4如何設定模態框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
