Twitter Bootstrap Modal의 호출자 요소를 얻는 방법은 무엇입니까?

Twitter Bootstrap Modal의 호출자 요소를 얻는 방법은 무엇입니까?

---

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이벤트 구독자 함수에서 모달을 호출 한 요소에 어떻게 액세스 할 수 있습니까?

---

덕분에 Bootstrap 3.0.0에서 해결되었습니다 event.relatedTarget.

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

---

다음을 들어야합니다.

$('[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을 제거해야합니다 (제 생각에).

이 솔루션에 대해 내가 좋아하는 점 : this , self , that 및 기타 프록시 호출 해결 방법 을 기억할 필요가 없습니다 .

물론, href 속성이 실제 링크 (동적 모달 로딩 옵션)가 아닌지 테스트해야합니다.

---

모달 요소에는 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
});

---

현재는 기본적으로 사용할 수 없습니다. 이에 대한 기능 요청과 부트 스트랩 모달 코드를 직접 편집하려는 경우 해결 방법이 있습니다.

여기를 참조 하십시오

---

나는 당신이 말한 것처럼 "invoker"와 관련된 일부 데이터를 바인딩해야하는 상황이있었습니다. "클릭"이벤트를 바인딩하고 다음과 같은 데이터로 작업하여 문제를 해결했습니다.

호출자

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

이와 같이 원하는대로 호출자와 관련된 데이터를 처리 할 수 ​​있습니다.

참고 URL : https://stackoverflow.com/questions/11570333/how-to-get-twitter-bootstrap-modals-invoker-element