부트스트랩 모달을 오픈할 때, 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으로 변경하였습니다.