如何將資料從超連結傳遞到 Bootstrap 模態？

將資料傳遞到Bootstrap 模態

模態視窗是使用者介面中的常見元素，允許使用者與特定內容進行交互，而無需離開目前頁面。本文討論了開啟模式時向模式傳遞資料問題的解決方案。

問題：

Web 開發人員經常遇到需要從超連結傳遞資料的情況到模式視窗。例如，考慮一個帶有附加唯一 ID 的超連結的使用者介面。單擊時，這些連結應開啟一個模式視窗並將 ID 傳遞給該模式。然而，許多開發人員在實現此功能時遇到困難。

解決方案：

解決此問題的一個有效方法是利用 jQuery 的 .on 事件處理程序。以下是如何實現資料傳遞的逐步說明：

1. HTML 標記：使用包含唯一 ID 的資料屬性定義超連結。在模態中包含隱藏的輸入欄位以擷取傳遞的資料：

<a data-toggle="modal" data-id="ISBN564541" class="open-AddBookDialog">Link 1</a>

<div class="modal hide">
<ol start="2"><li>
<strong>JavaScript</strong>：將點擊事件綁定到超連結並提取資料屬性值。相應地更新模態中的隱藏輸入：</li></ol>
<pre class="brush:php;toolbar:false">$(document).on("click", ".open-AddBookDialog", function () {
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
});

3. 可選：如果需要，可以透過手動呼叫modal('show') 函數來顯示模態：

$('#addBookDialog').modal('show');

額外注意：

• 提供的解決方案利用委託事件處理，這比將事件綁定到單一元素更有效。
• 無需手動呼叫 modal('show ') 函數，因為模態切換元素上的點擊事件將自動顯示模態。

透過執行以下步驟，開發人員可以有效地將資料從超連結傳遞到模式窗口，增強使用者體驗並簡化開發工作流程。