bootstrap模態框怎麼做

如何使用Bootstrap 創建模態框？創建一個具有適當HTML 結構的模態框。包含Bootstrap 和jQuery 庫以啟用模態功能。使用JavaScript 或jQuery 代碼顯示或隱藏模態框。

如何使用Bootstrap 創建模態框

引言

Bootstrap 提供了一個簡單的API 來創建交互式的模態框，允許你彈出信息、表單或其他內容，而無需重新加載頁面。

創建模態框

1. 添加基本HTML:

 <code class="html"><div class="modal" id="myModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 id="模态框标题">模态框标题</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button> </div> <div class="modal-body">模态框内容... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div></code>

2. 包含Bootstrap 和jQuery:

確保你在HTML 頁面中包含Bootstrap 和jQuery 庫：

 <code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script></code>

打開和關閉模態框

使用JavaScript 或jQuery 代碼來顯示或隱藏模態框：

顯示模態框：

 <code class="javascript">$('#myModal').modal('show');</code>

隱藏模態框：

 <code class="javascript">$('#myModal').modal('hide');</code>

其他選項

Bootstrap 模態框還提供各種其他選項，如：

• 鍵盤事件：設置鍵盤快捷鍵來打開和關閉模態框。
• 動畫：啟用或禁用模態框的動畫效果。
• 焦點：控制模態框打開時鍵盤焦點的行為。
• 遠程內容加載：從遠程URL 加載模態框的內容。

以上是bootstrap模態框怎麼做的詳細內容。更多資訊請關注PHP中文網其他相關文章！