[HTML] Bootstrap Modal 사용법

부트스트랩 모달을 이용하여 팝업창을 띄우는 방법에 대해 알아보려고 합니다.

새로운 창을 띄우는 것보다 간단하고 보기 좋아서 자주 사용하는 코드입니다.

 

---

 

1. Bootstrap 다운로드

Bootstrap 다운로드

Bootstrap

 

 

2. 모달 창을 띄울 버튼이나 링크 만들기

<a data-toggle="modal" data-target="#myModal">모달 창 띄우기</a>

- data-toggle을 modal, data-target은 #myModal로 설정했습니다.

- modal 창의 id는 data-target과 같은 myModal 이어야 합니다.

 

 

3. 팝업으로 띄울 내용 채우기

<div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">
    
        <div class="modal-content">
        
            <div class="modal-header">
            
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">모달 제목</h4>
                
            </div>

            <div class="modal-body">
            
            	<p>팝업 내용</p>

            </div>

            <div class="modal-footer">
            
            	<p>팝업 footer</p>
                
            </div>

        </div>

    </div>
    
</div>

 

- id는 myModal입니다.

- modal-content를 살펴보면 modal-header, modal-body, modal-footer 로 나뉘어져 있습니다.

 

- 모달 창을 닫을 수 있도록 close 버튼을 header에 만들었습니다.

- 모달 창의 제목은 "모달 제목", 내용은 "팝업 내용", footer는 "팝업 footer"로 구성되어 있습니다.

 

- 2번의 링크를 클릭하면 위의 내용이 팝업으로 뜨게 됩니다.

 

 

 

이상으로 Bootstrap Modal 사용 방법에 대해 알아보았습니다.

 

---