[script] modal 열기, 닫기, 닫기 이벤트처리 및 해제

 

열기(open) : $('#modalID').modal('show')

닫기(close) : $('#modalID').modal('hide')

modal 종료 시, 이벤트 처리

$('#modalID').on('hidden.bs.modal', function (e) {
     // function
})

modal 종료 시, 이벤트 처리 해제

$('#modalID').off()

modal 오픈 시, 이벤트 처리

$('#modalID').on('shown.bs.modal', function (e) {
     // function;
})

example 1. 모달로 alert 창 생성 (+종료 시 focus 처리)

/**
* alert('이름은 필수 입니다.', $('[name=name]')); // 모달창 종료 시, name에 focus 처리
* alert('저장 되었습니다.'); // 모달 창 종료 (일반종료)
*/
alert(msg, attr) {
		$('#modalIDText').text(msg)       // 모달창에 메세지 변경
		$('#modalID').modal('show')		  // 모달창 open
		if(!(attr == null || attr == '' || attr == undefined || attr == 'undefined')) {
        	// 속성 인자가 들어왔을 시, 모달창 닫혔을 때 focus() 이벤트 처리 
			$('#modalID').on('hidden.bs.modal', function (e) { // 모달창 닫기 event
				attr.focus()			// 속성에 focus() 처리
				$('#modalID').off()		// 현재 닫기 event 종료 처리, 누락 시 마지막 focus() 처리 계속 됨.
		})
	}
}

 

example 2. 모달 종료 시, 폼 초기화 

$('#modalID').on('hidden.bs.modal', function (e) {
	// 모달 종료 시,
	document.forms['form-name'].reset(); // 폼의 전체 값 초기화 처리
})

<form name="form-name" id="form-qna" method="post" onsubmit="return false;">
	
</form>