부트스트랩 모달 상자 중첩 및 tabindex 속성에 대한 자세한 설명

이 글은 주로 부트스트랩 모달 상자 중첩, tabindex 속성, 섀도우 제거에 대해 소개합니다. 도움이 필요한 친구들이 참고하면 도움이 될 것입니다.

모달 상자 중첩

개발 중에는 클릭 이벤트를 통해 첫 번째 모달 상자를 트리거해야 하며, 두 번째 모달 상자는 이벤트를 통해 호출됩니다. , 중첩된 모달 상자.

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

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

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

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 스타일을 설정하거나

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

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

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

관련 권장 사항 :

BootStrap 모달 상자는 수직 센터링 문제를 해결하는 방법

AJAX 및 SpringMVC 부트스트랩 모달 상자의 페이징 쿼리 기능에 대한 자세한 설명

위 내용은 부트스트랩 모달 상자 중첩 및 tabindex 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!