부트스트랩 모달 상자 중첩, tabindex 속성, 그림자 제거 방법

모달 상자 중첩

개발 중에 클릭 이벤트를 통해 첫 번째 모달 상자를 트리거해야 할 필요성이 발생했습니다. 트리거 후 두 번째 모달 상자는 이벤트를 통해 호출되고 세 번째 모달 상자는 이벤트. 모달 상자, 즉 중첩된 모달 상자입니다.

모달 상자 중첩에는 관련된 중첩된 모달 상자를 감싸는 모달 상자가 필요하므로 클릭할 때 모달 상자가 엉망이 되지 않습니다.

HTML 코드는 다음과 같습니다:

<!--最外层包裹的模态框-->
<div class="modal  fade" id="outermost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
　　<!--第一个模态框--> 
　　<div class="modal-dialog modalWith firstModal" id="productModal" role="document"></div>  
　　<!--第二个模态框--> 
　　<div class="modal" tabindex="-1" role="dialog" id="addproduct" aria-labelledby="myModalLabel"></div> 
　
　　<!--第三个模态框--> 
　　<div class="modal" tabindex="-1" role="dialog" id="selectProduct" aria-labelledby="myModalLabel"></div> 
</div>

tabindex

모달 상자의 tabindex 속성에 대한 w3c 설명은 다음과 같습니다. tabindex 속성은 요소의 탭 키 제어 순서를 지정합니다(탭 키가 내비게이션에 사용됩니다.) tabindex 속성은 Safari를 제외한 거의 모든 브라우저에서 사용할 수 있습니다.

중첩된 모달 상자에서 속성이 존재하면 값이 무엇이든 키보드의 리턴 키(Esc)가 작동하고, 존재하지 않으면 리턴 키(Esc)가 작동하지 않습니다.

모달 상자와 함께 제공되는 그림자 제거

모달 상자가 실행되면 전체 페이지를 덮는 그림자 레이어가 생성됩니다.

그림자 레이어는 .modal-backdrop 이라는 클래스에 의해 제어됩니다.

.modal-backdrop 부트랩 소스 코드의 스타일은 다음과 같습니다.

.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

그림자 레이어를 제거해야 할 경우 CSS 스타일을 설정하거나

1 .modal-backdrop {
2   filter: alpha(opacity=0)!important;
3   opacity: 0!important;
4 }

을 제어할 수 있습니다. js를 통해

1 $(".modal-backdrop").remove();

위 내용은 부트스트랩 모달 상자 중첩, tabindex 속성, 그림자 제거 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!