Bootstrap modal 위로 열린 레이어(jquery dialog)에서 TEXT형 INPUT이 클릭되지 않을 때

부트스트랩 모달창을 연후 클릭 이벤트 발생 시 jquery dialog가 열리는 작업을 하던 중 2가지 문제가 발생했다

 

 

첫번째, modal 하위로 dialog 레이어가 보이는 상황

 

jquery dialog 의 z-index 기본값이  bootstrap modal 의 z-index 값 보다 낮아서 생기는 것으로 보이며

jquery dialog 의 z-index 값 설정을 변경했더니 정상적으로 dialog가 modal 상단으로 노출됐다.

 

 

두번째, dialog에서 input text에 click시 focus가 되지 않는 상황

 

dialog 가 modal 위로 올라오기는 했으나 text 타입의 input이 focus되지 않는 문제가 생겼다.

버튼클릭등의 이벤트는 정상적으로 작동되나 input 클릭 시 focus가 되지 않아 문자를 입력 할 수 없었다.

modal 창을 닫았을 때 정상적으로 focus 되는 것으로 보아 z-index의 문제가 아닌 것으로 보였다.

 

부트스트랩 이벤트 리스너 처리 중 포커스 관련된 코드가 문제였다.

Modal.prototype.enforceFocus = function () {
	$(document)
	.off('focusin.bs.modal') // guard against infinite focus loop
	.on('focusin.bs.modal', $.proxy(function (e) {
		if (document !== e.target &&
		this.$element[0] !== e.target &&
		!this.$element.has(e.target).length) {
			this.$element.trigger('focus')
		}
	}, this))
}

 

모달이 아닌 다른 요소를 클릭 시 모달로 포커스가 되도록 하는 부분이었는데  버튼은 클릭 이벤트로 처리되다 보니

정상적으로 작동되고 input은 포커스 처리가 되다보니 클릭을 해도 해당 코드 때문에 모달쪽으로 포커스를 잡는 것이 문제였다.

 

모달창 오픈 시 모달로 포커스인 되는 부분을 중지시켰다.

$('#myModal').on('shown.bs.modal', function() {
	$(document).off('focusin.modal');
});

 

그런데 페이지 별로 다른 버전의 jquery가 적용되어 있다보니 해당 소스가 적용되지 않는 페이지가 있었다.

modal에서 focus 관련 처리가 되지 않도록 페이지 하단 script 영역에 추가했다.

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

 

부트스트랩 모달과 함께 jquery ui dialog 같은 다른 modal 관련 script를 사용한다면 동일한 상황이 발생할 것 같다.