본문 바로가기

Frontend-Programming/Javascript

부트스트랩 Modal 닫힘 event 감지

 부트스트랩 모달을 오픈할 때, Ajax로 데이터를 가져오고 값을 모달에 뿌리는 구조를 만들고 있는데, 하나의 모달을 오픈하고 다른 모달을 클릭하면 그 값이 그대로 박혀있는 현상을 개선하기 위해서 스크립트를 작성합니다. 

$('#product-modal').on('hidden.bs.modal', function () {
	$("#modal-title").text('');
	$("#modal-price").text('');
	$("#modal-state").text('');
	$("#cardPreviewImage").attr('src','');
	$('#cardPreviewImage').css("display", "none");
	$('#modal-cart').css("display", "none");
	$('#modal-detail').css("display", "none");
});

부트스트랩 모달을 닫을 때에는 hidden.bs.modal이라는 이벤트가 발생하여 그 이벤트를 핸들링하는 함수를 만들었습니다. 

 저는 모달에 뿌린 내용들을 모두 없애고 dom들을 display:none으로 변경하였습니다.