누적 모달 간 전환

Question

현재 내 화면에 몇 개의 누적 모달이 열려 있습니다. 이를 위해 기본 JSFiddle을 만들었습니다. 내가 원하는 것은 오픈 조동사 사이를 클릭 할 수 있습니다

#myModal{ 
    top: 0% ; 
} 
#myModal2{ 
    top: 5% ; 
} 
#myModal3{ 
    top: 10% ; 
} 
#myModal4{ 
    top: 15% ; 
} 

:

그들은으로 적층되어있다. 예를 들어. 네 개가 모두 올라 왔을 때, 나는 모달 1의 보이는 부분을 클릭 할 수 있고 모달 1은 앞으로 와야 할 수 있기를 바란다. 아니면 (일어날 수 없다면) Modal 1을 앞으로 가져올 수있는 버튼이 필요합니다.

지금까지 부트 스트랩에서 찾을 수있는 것을 찾을 수 없었습니다.

Answer 1

필자는 이것을 시도 할 수 없었지만 클래스 .modal-dialog 인 모든 요소에 대해 click 이벤트를 만들고 이벤트 처리기에서 .modal의 모든 요소를 ​​특정 z- 인덱스로 설정 한 다음 this을 사용하여 클릭 한 항목의 모달이 높은 z- 색인이됩니다. 같은

뭔가 :

$(".modal-dialog").click (function() { 
     var modalSelected = $(this).parent();  
     $(".modal").each(function() { 
      var idx = $(this).length; 
      $(this).css('z-index', 1040 + (10 * idx)); 
     }); 
     modalSelected.css('z-index',1500); 
}); 

문제는있을 수는 하나의 큰 모달 수도 가릴 다른 모든 모달 대화 상자입니다. 가능하면 using tabs instead에 대해 생각 했습니까?