내가 만든 common-modal

2022. 1. 16. 12:02ㆍbootstrap

alert.html

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">

<!-- Modal : moveFirstQuizMsg-->
<div class="modal fade" th:id="${modalVO.modalId}" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body text-center">
				<span th:utext="${modalVO.modalText}"></span>
			</div>
			<div class="modal-footer">
				<button type="button" id="modalAlertBtn" class="btn btn-primary" data-bs-dismiss="modal" th:text="${modalVO.actBtnText}"></button>
			</div>
		 </div>
	</div>
</div>
</html>


confirm.html

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">

<!-- Modal : moveResultMsg -->
<div class="modal fade" th:id="${modalVO.modalId}" data-bs-backdrop="static"
	data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div class="mb-3 text-center">
					<label for="message-text" class="col-form-label d-grid">
						<span th:text="${modalVO.modalText}" id="message-text"></span>
					</label>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" id="modalConfrimBtn" class="btn btn-primary" th:text="${modalVO.actBtnText}"></button>
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="${modalVO.clsBtnText}"></button>
			</div>
		 </div>
	</div>
</div>
</html>


modalVO.java

package com.web.lawingmachine.app.common.vo;

import lombok.Data;

@Data
public class ModalVO {

	private String modalId;

	private String modalTitle;
	private String modalText;

	private String modalFunc;

	private String actBtnText;
	private String clsBtnText;
}


modalController.java

    @RequestMapping("/alert")
    public String alert(ModalVO modalVO, ModelMap model) {
        model.addAttribute("modalVO", modalVO);
        return "view/modal/alert";
    }
    
    @RequestMapping("/confirm")
    public String confirm(ModalVO modalVO, ModelMap model) {
    	model.addAttribute("modalVO", modalVO);
    	return "view/modal/confirm";
    }


common.js

function common_modal_alert(modalText, callback, actBtnText, modalTitle) {

	let url = '/modal/alert';
	let modalId = 'modalAlert';
	if(!actBtnText) { actBtnText = '확인' };

    let data = {
        'modalId': modalId,
        'modalText': modalText,
        'actBtnText': actBtnText
    };

	let modal;
    $.get(url, data).done(function (modalHtml) {
        $('#modalDiv').html(modalHtml);
        modal = new bootstrap.Modal(document.getElementById(modalId));
        modal.show();
    })
    
   	$('#modalDiv').on('show.bs.modal', function () {
       $('#modalAlertBtn').on('click', function () {
			if(callback && $.isFunction(callback)) {
				callback();
		        modal.hide();
			}
		});
	});
}

function common_modal_confirm(modalText, callback, actBtnText, clsBtnText, modalTitle) {

	let url = '/modal/confirm';
	let modalId = 'modalConfirm';
	if(!actBtnText) { actBtnText = '저장' };
	if(!clsBtnText) { clsBtnText = '닫기' };

    let data = {
        'modalId': modalId,
        'modalText': modalText,
        'actBtnText': actBtnText,
        'clsBtnText': clsBtnText
    };

	let modal;
    $.get(url, data).done(function (modalHtml) {
        $('#modalDiv').html(modalHtml);
        modal = new bootstrap.Modal(document.getElementById(modalId));
        modal.show();
    })
    
   	$('#modalDiv').on('show.bs.modal', function () {
       $('#modalConfrimBtn').on('click', function () {
			if(callback && $.isFunction(callback)) {
				callback();
		        modal.hide();
			}
		});
	});
}

'bootstrap' 카테고리의 다른 글

bootstrap modal 참고  (0) 2022.01.16
bootstrap modal callback  (0) 2021.12.22

관련글

티스토리툴바