html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기
DevOps/Web 2022. 3. 22. 15:30
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">×</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');
}팝업 화면
참고
'DevOps > Web' 카테고리의 다른 글
| javascript 프로그램 실행 지연(sleep) (0) | 2022.07.27 |
|---|---|
| summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거 (0) | 2022.07.14 |
| javascript에서 여러 라인을 하나의 라인으로 처리 (Line continuation) (0) | 2021.12.11 |
| html summernote 사용하여 값 조회 / 입력 / 파일 처리 (0) | 2021.12.11 |
| javascript에서 table의 <tr> <td> 값 조회/변경 (0) | 2021.12.11 |
