부트스트랩을 사용하면서 자주 보게되는 것이
이런 top-navigation bar 다.
이걸 스크롤 여부에 관계없이 항상 위에 놓고싶으면, class 에 fixed-top 옵션을 주면 된다.
하지만 만약 navigation bar 안에 modal을 작동시키는 버튼이 있다면
모달은 먹통이 되어버리고 만다.
문제의 해결은 Stackoverflow에서 찾을 수 있다.
https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background
If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.
Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.
Here are a couple ways to do this:
- Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag
</body>. - Alternatively, you can remove
position:CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.
만약 모달 컨테이너가 position 설정이 fixed나 relative 또는 그 포지션으로 설정된 객체 안에 들어가 있다면 문제는 발생한다.
모달 컨테이너와 모든 부모컨테이너의 position을 디폴트로 설정하면 문제는 해결된다.
몇가지 방법으로는
1. modal div를 fixed/relative 설정 객체 밖으로 빼라. </body.> 바로 앞이 좋을 수 있다.
2. 다른 방법으로 문제가 해결될 때까지 modal의 position: 속성과 부모 속성을 지우라. 그러니 이 방법은 네 페이지의 화면 구성을 바꿀 수도 있다.
나는 <body> 바로 뒤에 모달을 위치시켰다.
문제 없이 잘 작동한한다.
'프로그래밍 > Web' 카테고리의 다른 글
| 네비게이션 바 fixed-top 설정 시 겹치는 문제 (1) | 2018.03.12 |
|---|---|
| jquery textarea 변수 값 가져오기 (0) | 2018.03.06 |
| JSTL c tag 에서 eq, ne null check 하기 (1) | 2018.03.05 |