boottstrap 모드 상자 내장,tabindex 속성,그림자 제거 예제 코드

2554 단어 bootstrap모드 프레임끼 워 넣다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 속성 에 규정된 요소 의 tab 키 제어 순서(tab 키 가 내 비게 이 션 에 사 용 될 때)입 니 다.Safari 를 제외 한 거의 모든 브 라 우 저 는 tabindex 속성 입 니 다.
모드 상자 에 포 함 된 세트 에서 이 속성 이 존재 할 때 값 이 얼마 든 키보드 의 리 턴 키(Esc)가 작용 할 수 있 습 니 다.존재 하지 않 을 때 리 턴 키(Esc)는 작 동 하지 않 습 니 다.
모드 상자 자체 그림자 제거
모드 상 자 를 터치 할 때 전체 페이지 를 덮어 쓰 는 그림자 층 이 생 깁 니 다.

이 그림자 층 은.modal-backdrop 제어 로 표 시 됩 니 다.
.modal-backdrop 은 bootsrap 소스 코드 의 스타일 이 다음 과 같 습 니 다.

.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();
총결산
위 에서 말 한 것 은 작은 편집 이 여러분 에 게 소개 한 boottstrap 모드 상자 내장,tabindex 속성,음영 을 제거 하 는 예제 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.작은 편집 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
JS div 모듈 캡 처 및 다운로드 기능 구현
Django 에서 jquery 의 ajax 를 사용 하여 데이터 인 터 랙 션 을 하 는 인 스 턴 스 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage