64

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…&lt;/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イベントサブスクライバー関数からモーダルを呼び出した要素にどのようにアクセスできますか?

4

5 に答える 5

109

おかげで Bootstrap 3.0.0 で解決されましたevent.relatedTarget。

$('#your-modal').on('show.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
});
于 2014-01-23T10:04:35.303 に答える
7

modalmodal 要素には、渡されたすべてのオプションを保存するという名前のデータ オブジェクトがあります。モーダルをトリガーする要素に「ソース」データ属性を設定し、それをソースの 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
});
于 2014-02-21T15:36:59.493 に答える
1

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

呼び出し側

<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);
});

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

于 2013-02-14T11:03:25.900 に答える
1

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

こちらをご覧ください

于 2012-07-31T23:53:26.197 に答える