如何使用 jQuery 將資料傳遞到 Bootstrap Modal？

將資料傳遞到 Bootstrap Modal

建立互動式網頁時，在元件之間傳遞資料可以增強使用者體驗並簡化功能。在 Bootstrap 模式的上下文中，在觸發超連結和模式本身之間傳輸資料可以為使用者提供附加資訊或上下文。

將資料動態傳遞到 Bootstrap 模式的一種方法是利用 jQuery 的 .on 事件處理程序。此方法可以靈活地捕獲對具有特定類別（例如“open-AddBookDialog”）的元素的潛在點擊。

$(document).on("click", ".open-AddBookDialog", function() {

當點選任何具有「open-AddBookDialog」類別的元素時，事件處理程序將執行。在此函數中，可以使用 .data() 方法取得與單擊的元素關聯的資料。

var myBookId = $(this).data('id');

此程式碼段會擷取附加到按一下的超連結的唯一 ID 並將其儲存在變數 myBookId 中。

接下來，可以使用 jQuery 的選擇器來定位 ID 為「bookId」的模式主體的輸入元素。此輸入欄位將插入傳遞的 ID。

$(".modal-body #bookId")

將此輸入元素的值設為 myBookId 可有效地將 ID 從超連結傳輸到模式。

$(".modal-body #bookId").val( myBookId );

透過動態填充模式中的輸入字段，可以從超連結傳遞有價值的信息，從而允許自訂模式功能，例如資料庫查找或自訂內容

最後值得注意的是，不需要手動呼叫modal('show') 函數來顯示模態框。資料傳輸完成後Bootstrap自動顯示模態。

以上是如何使用 jQuery 將資料傳遞到 Bootstrap Modal？的詳細內容。更多資訊請關注PHP中文網其他相關文章！