부트스트랩 모달로그 만들기 1

보이시는 조회 라는 버튼을 클릭 시 모달로그(Modal-dialog) 가 오픈 되도록 해보겠습니다

위와 같이 button 태그를 작성합니다.

<button type="button" class="btn btn-primary" data-toogle="modal" data-target="#hiddenModal">

조회

</button>

hiddenModal 부분에는 class 명을 만들어주듯이 원하는 형태로 만들어주시면 됩니다.

data-target 이 있어야만 잠시후 hidden 으로 숨겨둔 모달로그를 활성화 시켜줍니다.

이 부분은 현재 헤더만 만들어본 상태입니다.

다음과 같이 따라해보세요

<div class="modal fade" id="hiddenModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">

x

</button>

</div>

</div>

</div>

</div>

modal fade 이 분이 있어야 display를 none 시켰다가 block 시키는 현상과 같습니다 

role="dialog" 이부부은 해당 div 를 dialog로 사용하겠다고 규칙을 정하는것입니다 자세한 내용은 검색창에 role를 검색해보세요 ^^

aria-hidden="true" DOM 요소들을 가르키는거라고 하는데 마쌍 지워보면 달라지는건 없습니다 ,(자세한건 추후 알게되면 수정해서 올리도록하겠습니다)