ハイパーリンクからブートストラップ モーダルにデータを渡すにはどうすればよいですか?

ブートストラップ モーダルにデータを渡す

モーダル ウィンドウはユーザー インターフェイスの一般的な要素であり、ユーザーが画面から離れることなく特定のコンテンツを操作できるようになります。現在のページ。この記事では、モーダルを開いたときにデータを渡す問題の解決策について説明します。

問題:

Web 開発者は、ハイパーリンクからデータを渡す必要があることがよくあります。モーダルウィンドウに。たとえば、一意の ID が付加されたハイパーリンクを備えたユーザー インターフェイスを考えてみましょう。これらのリンクをクリックすると、モーダル ウィンドウが開き、モーダルに ID が渡されます。しかし、多くの開発者はこの機能を実装する際に困難に直面しています。

解決策:

この問題に対する効果的な解決策の 1 つは、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. Optional: 必要に応じて、 modal('show') 関数を手動で呼び出してモーダルを表示します。

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

追加注:

• 提供されるソリューションは委任されたイベント処理を利用しており、イベントを個々の要素にバインドするよりも効率的です。
• modal('show を手動で呼び出す必要はありません) ') 関数。モーダル トグル要素のクリック イベントによりモーダルが自動的に表示されます。

次のようにします。これらのステップにより、開発者はハイパーリンクからモーダル ウィンドウにデータを効果的に渡すことができ、ユーザー エクスペリエンスが向上し、開発ワークフローが簡素化されます。