부트 스트랩 동적 관리 모달

Question

다른 창에서 유사한 작업을 수행하면서 다른 창에서 유사한 내용의 여러 부트 스트랩 모달을 관리 할 수 ​​있습니까?

더 잘 설명하려면 : 저는 작업중인 시스템의 작업 공간을 제어하기 위해 jQuery UI 탭을 사용하고 있습니다. 따라서 메뉴 항목을 클릭하면 내용과 함께 새 탭이 열립니다.

문제는 : 몇 가지 옵션이있는 탭이 두 개 있고 각 탭마다 자체 부트 스트랩 모달이 있습니다.

두 탭을 모두 열면 임의의 임의의 탭이 해당 모달을 열 수 없습니다 (모달 - 백 드롭 div 만 나타남).

각 모달의 ID가 다릅니다.

을 열 때마다 모달, 나는 다음과 같은 스크립트를 사용하려고 할 내용을 제어하려면 다음 (페이드 인 또는 페이드 아웃)

나는 독립 국가로, 각각의 모달을 제어 할 필요가

$(document).ready(function() { 
    $('#MYMODAL_ID').modal('hide'); 
    $('.edit_user_btn').live("click", function() { 
     FRMUPDPROFILE_profilesid = $(this).attr("value"); 
     $('#MYMODAL_ID').modal('show'); 
     $('input[name=FRMUPDPROFILE_profileID]').val(FRMUPDPROFILE_profilesid); 
    }) 
}); 

을의 방법은 모두 사이 충돌이 없다.

모달 호출은 다음과 같습니다 나는 5 조동사가있는 경우 내가 모든 모달 고유 ID를 가지는 것을 특징으로하기 때문에

$('.edit_user_btn').live("click", function() { 

, 그들은, 독립적 인 모드에서 작업 후 닫기를 열어야합니다. 내가 부트 스트랩 3.0

어떤 도움을 사용하고

부탁드립니다!

Answer 1

내가이 문제를 이해한다면 나는 당신이 그들에게 전화하는 유일한 방법이 필요하다고 생각한다. 당신의 탭을 가정하면 아약스와 함께 작동하지 않습니다, 이런 식으로, 당신의 연결 (예를 들어) modal_id라는 사용자 지정 속성을 추가로 다음의 모든 5 조동사을 미리 정의하고 값이 모달의 고유 ID 수 있습니다

<!-- Modals links - can be anywhere --> 
<a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_1">Edit link for 1</a> 
<a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_2">Edit link for 2</a> 

<!-- modal 1 --> 
<div id="MYMODAL_1" class="modal fade" tabindex="-1" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3>Modal 1 header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>modal 1 content here…</p> 
     <a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_2">Edit link for 2</a> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
</div> 
</div> 

<!-- modal 2 etc --> 
<div id="MYMODAL_2" class="modal fade" tabindex="-1" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3>Modal header 2</h3> 
    </div> 
    <div class="modal-body"> 
     <p>modal 2 content here…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
</div> 
</div> 

그런 다음 jQuery를 어디

$('.edit_user_btn').click(function(){ 
    var modal_id = $(this).attr('modal_id'); 
    $("#" + modal_id).modal({show:true}) 
}); 

에서 바로 모달 때마다 호출에 따라이