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

Question

私はモーダルを呼び出すための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要素にアクセスするにはどうすればいいですか？私のイベント加入者機能からモーダルを呼び出しましたか？

Answer 1

event.relatedTargetのおかげでブートストラップ3.0.0で解決されました。

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

Answer 2

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

here

Answer 3

を参照してください。私はあなたが言ったと同じように、私は「呼び出し」に関連するいくつかのデータをバインドするために持っていた状況がありました。 私はそれを「クリック」イベントを結合し、このようなデータを扱うことによってそれを解決するために管理している：

呼び出し

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

、あなたはとにかくあなたが欲しいあなたの呼び出しに関連するデータを扱うことができます。

Answer 4

あなたはに耳を傾ける必要があります：

$('[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')); 
}); 

あなたはもちろん、彼らは火shown.bs.modalまたは他のイベントとのshow.bs.modalを置き換えることができます。 これはBootstrap 3.0.0用です。 2.3.2を使用している場合は、.bs.modal（私は思う）を取り除く必要があります。

私はこのソリューションについて好き：あなたはこのが誰であるかを覚えておく必要はありません、および他のプロキシが回避策を呼び出すこと自己、。

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

Answer 5

モーダル要素が渡されているすべてのオプションを保存し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 
});