[bootstrap4] modal 모달창 띄우고 창안닫히게

부트스트랩을 이용하면 아주 간편하게 모달창을 띄울수 있다.

 

<a class="nav-link" href="#" data-toggle="modal" data-target="#apply">모달창 띄우기</a> 
 
<div class="modal fade" id="apply" data-backdrop="static" data-keyboard="false">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">창닫기</button>
</div>

 

위의 예제를 보면 data-toggle 옵션으로 apply id값을 가지는 모달창을 띄운다.

 

data-backdrop="static" 으로 div 태그내 옵션을 주면 모달창 주의의 검은 배경을 클릭하여도 창이 닫히지 않는다.

 

data-keyboard="false" 옵션은 esc 키를 눌러도 창을 닫지 않게 해준다.

 

끝으로,

 

<button> 태그내 data-dismiss="modal" 옵션을 주면 이 버튼 클릭으로 모달창을 닫을 수 있다.

 

추가적으로 javascipt 상으로 모달창을 간단히 띄울때

<script>
$("#apply").modal();
 
// 모달창안에 test.html 을 보여준다.
$("#apply").model({
    remote : 'test.html'
});
</script>