html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기

Delete 실행 시 확인창을 예제로 작성

modal 호출 시 매개변수를 포함하여 처리

 

html

매개변수 전달을 위해 modal_id를 hidden타입으로 생성

매개변수 전달을 위해 result.id 변수를 SetParamModal()함수에 전달

ID가 Delete_Modal 인 modal 생성

Close 버튼은 창 닫기

Delete 버튼은 Delete() 함수 호출

<!-- Button trigger modal -->
<input type="hidden" name="modal_id" id="modal_id">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#Delete_Modal" onclick="SetParamModal('{{ result.id }}')">
  Delete
</button>


<!-- Modal -->
<div class="modal fade" id="Delete_Modal" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="DeleteModalLabel">Delete</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        삭제 하시겠습니까 ?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" href="#" onclick="Delete()">Delete</button>
      </div>
    </div>
  </div>
</div>

js

SetParamModal(modal_id) : Modal 실행 시 매개변수 전달 기능

Delete() : 실제 삭제 로직 추가

<script src="./jquery-3.4.1.min.js"></script>
<script src="./bootstrapt/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./bootstrapt/css/bootstrap.min.css" />


// modal_id 타입에 전달받은 값을 설정
// Modal 버튼 클릭 시 호출
function SetParamModal(modal_id) {

    $('#modal_id').val(modal_id);
}


// Delete
// Modal창에서 'Delete' 버튼 클릭 시 호출
function Delete() {

    //Modal 호출시 전달한 id 확인
    id = $('#modal_id').val();
    
    // Delete 로직 실행
    // 'Delete from table where id = ' + id;
    
    // Delete modal창 닫기
    $('#Delete_Modal').modal('hide');
}

팝업 화면

참고

https://getbootstrap.com/docs/4.4/components/modal/