[Bootstrap 모달팝업] 팝업 생성 및 이벤트 사용하기

 

◆ 모달팝업 띄우기

모달 버튼의 data-target 속성과 모달 팝업의 id 속성을 맞춰줍니다.

 

<!-- 모달팝업 띄우기 버튼 -->
<button 
 type="button" 
 class="btn btn-primary" 
 data-toggle="modal" 
 data-target="#exampleModal" 
 data-what="hello">버튼</button>

<!-- 모달팝업 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

 

 

◆ 모달팝업 이벤트 걸기

모달 팝업에 show.bs.modal 이라는 이벤트 함수를 정의합니다.

클릭시 눌려진 버튼을 참조하고 싶은 경우에는 event.relatedTarget 셀렉터를 사용하여 버튼을 가져와서 사용합니다.

따라서 버튼에 정의되어 있는 data-what 속성값을 불러와서 모달팝업에서 사용할 수 있습니다.

 

// 모달 팝업 띄울 시 발생하는 이벤트 (이벤트명 : show.bs.modal)
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  var what = button.data('what');
  
  // 모달 팝업에 데이터 집어넣기
  var modal = $(this);
  modal.find('.modal-title').text('New message to ' + what)
  modal.find('.modal-body input').val(what)
})