如何使用Bootstrap 創(chuàng)建模態(tài)框？創(chuàng)建一個(gè)具有適當(dāng)HTML 結(jié)構(gòu)的模態(tài)框。包含Bootstrap 和jQuery 庫以啟用模態(tài)功能。使用JavaScript 或jQuery 代碼顯示或隱藏模態(tài)框。

如何使用Bootstrap 創(chuàng)建模態(tài)框

引言

Bootstrap 提供了一個(gè)簡(jiǎn)單的API 來創(chuàng)建交互式的模態(tài)框，允許你彈出信息、表單或其他內(nèi)容，而無需重新加載頁面。

創(chuàng)建模態(tài)框

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 class="modal-title">模態(tài)框標(biāo)題</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關(guān)閉"></button> </div> <div class="modal-body">模態(tài)框內(nèi)容... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關(guān)閉</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>

打開和關(guān)閉模態(tài)框

使用JavaScript 或jQuery 代碼來顯示或隱藏模態(tài)框：

顯示模態(tài)框：

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

隱藏模態(tài)框：

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

其他選項(xiàng)

Bootstrap 模態(tài)框還提供各種其他選項(xiàng)，如：

• 鍵盤事件：設(shè)置鍵盤快捷鍵來打開和關(guān)閉模態(tài)框。
• 動(dòng)畫：啟用或禁用模態(tài)框的動(dòng)畫效果。
• 焦點(diǎn)：控制模態(tài)框打開時(shí)鍵盤焦點(diǎn)的行為。
• 遠(yuǎn)程內(nèi)容加載：從遠(yuǎn)程URL 加載模態(tài)框的內(nèi)容。

以上是bootstrap模態(tài)框怎麼做的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！