jQuery UI 를 이용하여 일반적으로 팝업창을 사용을 많이 합니다.
다이알로그 창을 이용해서 많이들 하시죠
그런데... 다이알로그 창에서 기타 플러그인을 이용한 Confirm이나 alert를 사용할 경우
Uncaught RangeError: Maximum call stack size exceeded.
오류를 만날때가 있습니다.
이 문제는 추가로 발생된 alert이나 confirm 창이 기존에 열려있는 다이알로그과 충돌이 발생하여 무한루프가 발생하여 생기는 오류 입니다.
(정확히는 jQuery Dialog와 bootbox 의 alert/confirm 이 서로 focus를 가져오려고 싸우다가 무한루프에 빠지는 현상입니다.)
현재시점(2017.08.04)에는 아직 완벽한 해결책을 찾지 못하였으나...
오류가 없이 사용할 수 있는 방법을 공유해드릴려고 합니다.
해당문제는 추가로 발생한 alert이나 confirm에서 해당 영역을 벗어난 부분을 클릭 할 경우 차동 창 닫기 기능이 동작하면서 발생하는 기능입니다.
위의 그림과 같이 진행되었을경우 마지막 이미지의 닫히는 행위가 수행 될때 Uncaught RangeError: Maximum call stack size exceeded. 가 발생하게 됩니다.
본론으로 들어가서 해결하는(?) 방법.. 그러니까 닫히는 기능을 사용안하게 하여 오류를 피해가는 방법을 소개해드립니다.
1. bootstrap[.js 혹은 bootstrap.min.js 을 Open
2. c.prototype.enforceFocus 항목을 찾은뒤 해당 함수를 주석처리 합니다.
3. enforceFocus 를 사용하는 항목을 주석처리하기 위해 d.enforceFocus()를 찾아 주석처리 합니다.
4. 정상동작하는지 확인합니다.
<참고 프로그램 소스 : 아래 붉은색 부분 참조>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 |
var c = function(b, c) {
....
...
..
this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar()
, this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize() , this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)) , this.$dialog.on("mousedown.dismiss.bs.modal", function() { d.$element.one("mouseup.dismiss.bs.modal", function(b) {
a(b.target).is(d.$element) && (d.ignoreBackdropClick = !0)
})
}), this.backdrop(function() {
var e = a.support.transition && d.$element.hasClass("fade");
d.$element.parent().length || d.$element.appendTo(d.$body), d.$element.show().scrollTop(0)
, d.adjustDialog(), e && d.$element[0].offsetWidth, d.$element.addClass("in") /*, d.enforceFocus()*/; var f = a.Event("shown.bs.modal", {
"relatedTarget": b
});
e ? d.$dialog.one("bsTransitionEnd", function() {
d.$element.trigger("focus").trigger(f)
}).emulateTransitionEnd(c.TRANSITION_DURATION) : d.$element.trigger("focus").trigger(f)
}))
}, c.prototype.hide = function(b) {
b && b.preventDefault(), b = a.Event("hide.bs.modal"), this.$element.trigger(b), this.isShown && !b.isDefaultPrevented() && (this.isShown = !1, this.escape(), this.resize(), a(document).off("focusin.bs.modal"), this.$element.removeClass("in").off("click.dismiss.bs.modal").off("mouseup.dismiss.bs.modal"), this.$dialog.off("mousedown.dismiss.bs.modal"), a.support.transition && this.$element.hasClass("fade") ? this.$element.one("bsTransitionEnd", a.proxy(this.hideModal, this)).emulateTransitionEnd(c.TRANSITION_DURATION) : this.hideModal())
}
//, c.prototype.enforceFocus = function() {
// a(document).off("focusin.bs.modal").on("focusin.bs.modal", a.proxy(function(a) {
// this.$element[0] === a.target || this.$element.has(a.target).length || this.$element.trigger("focus")
// }, this))
//}
....
...
..
|
cs |
'Web > JQuery' 카테고리의 다른 글
| jQuery Selector(선택자) - #1 개요 및 기본 사용법 (0) | 2020.03.25 |
|---|---|
| jQuery replaceAll() 함수 만들기 (0) | 2020.03.13 |
| Button Click 시 Submit이 되는현상 (0) | 2017.02.21 |
| [jqGrid] 그리드의 해더와 내용이 밀리는 현상 (0) | 2017.02.13 |
| [JavaScript] 데이터 타입 - 수 (Numbers) (0) | 2016.10.14 |