web-dev-qa-db-ja.com

Twitter Bootstrap Modalのinvoker要素を取得するには？

モーダルを呼び出すためのa要素があります：

<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>

そして、これが私のモーダルだと言ってください：

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

モーダルによって発生したイベントに関数をバインドできます。

$('#myModal').on('hidden', function () {
  // do something…
})

私の質問は：モーダルを呼び出したa要素にイベントサブスクライバー関数からどのようにアクセスできますか？

javascripttwitter-bootstrapmodal-dialog
60
cnkt

それはBootstrap 3.0.0のおかげでevent.relatedTarget。

$('#your-modal').on('show.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
});
100
lou

あなたは聞く必要があります：

$('[data-toggle="modal"]').on('click', function() {
    $($(this).attr('href')).data('trigger', this);
});
$('.modal').on('show.bs.modal', function() {
    console.log('Modal is triggered by ' + $(this).data('trigger'));
});

もちろん、show.bs.modalをshown.bs.modalまたはそれらが発生する他のイベントに置き換えることができます。これはBootstrap 3.0.0のためです。2.3.2を使用している場合は、削除する必要があります .bs.modal （おもう）。

このソリューションの好きなところ：誰が覚えている必要はありません この、 自己、 それ その他のプロキシ呼び出しの回避策。

もちろん、href属性が実際のリンクではないかどうかをテストする必要があります（動的モーダル読み込みオプション）。

16
Alex

モーダル要素には、渡されるすべてのオプションを保存するmodalという名前のデータオブジェクトがあります。モーダルをトリガーする要素に「ソース」データ属性を設定し、ソースのIDに設定してから、後でoptions変数から取得できます。

トリガーは次のとおりです。

<a id="launch-modal-1" class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" data-source="#launch-modal-1">Launch Modal</a>

イベントコールバックで、modalデータオブジェクトを取得し、sourceオプションを確認します。

$('#myModal').on('hidden', function () {
  var modal = $(this).data('modal');
  var $trigger = $(modal.options.source);
  // $trigger is the #launch-modal-1 jQuery object
});
7
user2109658

現在、そのままでは使用できません。ブートストラップモーダルコードを自分で編集したい場合は、それに対する機能要求と回避策があります。

こちら をご覧ください

1
SummerDew

あなたが言ったように、「呼び出し側」に関連するいくつかのデータをバインドしなければならない状況がありました。 「クリック」イベントをそれにバインドし、次のようなデータを操作することで解決できました。

呼び出し側

<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add">

呼び出し側に関連するデータをキャッチするJS（コード例のみ）

$('#element').on('click', function () { // Had to use "on" because it was ajax generated content (just an example)
    var self = $(this);
});

このように、必要に応じて呼び出し側に関連するデータを処理できます。

1
darksoulsong