트위터 부트 스트랩 다중 모달 오류

트위터 부트 스트랩 다중 모달 오류

---

다른 모달 안에 모달을 넣으려고합니다. 그러나 firefox에서 "너무 많은 재귀"와 같은 오류가 발생했습니다.

최신 jQuery와 Twitterbootstrap을 사용했지만 여전히이 문제가 있습니다.

다음은 오류를 보여주는 플 런커 입니다.

"Uncaught RangeError : Maximum call stack size exceeded"또는 "too much recursion"을 찾을 수 있습니다.

콘솔 오류

누구든지 그것을 고치는 방법을 알고 있습니까? 감사

---

부트 스트랩 파일을 수정하지 않고 maxisam 답변의 첫 번째 솔루션을 적용 할 수 있습니다 (할 수 없거나 원하지 않는 경우).

부트 스트랩 파일이 포함 된 후이 줄을 어딘가에 작성하십시오.

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

참고 : 이것은 Bootstrap 3이 아닌 Bootstrap 2에서만 테스트되었습니다.

---

좋습니다. 발견 된 문제인 것 같습니다.

(분명히 "너무 많은 재귀"대신 "Uncaught RangeError : Maximum call stack size exceeded"라는 키워드를 사용해야합니다. :()

여기에 해결책이 있습니다.

1. modal.js 수정

이 게시물에서 https://github.com/twbs/bootstrap/pull/5022

@onassar는 솔루션을 가져옵니다

후속 조치 : bootstrap-modal v2.2.0으로 작업하는 모든 사람을 위해 forcedFocus 메소드에서. $ element.focus ()가 문제를 해결하는 것 같습니다.

그 결과 모달이 초점을 맞출 수 없기 때문에 (pfft, 나는 스스로 할 수 있습니다 : P), 따라서 다중 모달은 초점을 위해 서로 도전하지 않습니다 (그 결과 무한 루프가 발생하고 rangerror / 재귀 루프).

도움이되기를 바랍니다 :)

나는 시도했고 작동합니다. ( 플 런커 )

2. 이 데모 를 해결 하려면 다른 플러그인 을 사용하십시오.

꽤 잘 작동하는 것 같습니다.

3. 공식적인 해결책을 기다리십시오.

그들의 년 로드맵 , 그들은 어떤 점에서이 모달 플러그인을 다시하고 싶어.

---

안타깝게도 SmartLove의 대답은 부족합니다. 작동하지 않으 $.fn.modal.Constructor.prototype.enforceFocus려면 모달이 닫힐 때 재설정해야합니다. 다음은 내가이없는 대한 우리의 코드에서 바로 양심의 가책 생산에 퍼팅 :

// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results 
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

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

$confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});

$confModal.modal({ backdrop : false });

---

4. 또는 새 모달을 표시 할 때 다음을 수행 할 수 있습니다.

1. 현재 활성화 된 모달 숨기기
2. 새 모달 표시

3. 새 모달을 닫을 때 이전에 숨겨진 모달을 표시합니다.

   var showModal = function ($dialog) {
       var $currentModals = $('.modal.in');
       if ($currentModals.length > 0) { // if we have active modals
           $currentModals.one('hidden', function () { 
               // when they've finished hiding
               $dialog.modal('show');
               $dialog.one('hidden', function () {
                   // when we close the dialog
                   $currentModals.modal('show');
   
               });
           }).modal('hide');
       } else { // otherwise just simply show the modal
           $dialog.modal('show');
       }
   };
   

참고 : $.one리스너를 한 번만 적용하고 bind/ unbind( on/ off)는 신경 쓰지 않습니다.

---

다음 CSS를 시도하십시오. 그것은 나를 위해 일했습니다.

span.select2-container {
    z-index:10050;
}

---

부트 스트랩 4의 대체 : $.fn.modal.Constructor.prototype.**enforceFocus**작성자$.fn.modal.Constructor.prototype.**_enforceFocus**

---

I solved this using a stack.

var openmodals = [];
$(function(){
  var ts = new Date().getTime();
  $("div.modal").each(function( d ) {
    ts++;
    $( this ).data( "uid", ts );
  });

  // after closing > 1 level modals we want to reopen the previous level modal
  $('div.modal').on('show', function ( d ) {
    openmodals.push({ 'id' : $( this ).data( "uid" ), 'el' : this });
    if( openmodals.length > 1 ){
        $( openmodals[ openmodals.length - 2 ].el ).modal('hide');
    }
  });
  $('div.modal').on('hide', function ( d ) {
    if( openmodals.length > 1 ){
        if( openmodals[ openmodals.length - 1 ].id == $( this ).data( "uid" ) ){
            openmodals.pop(); // pop current modal 
            $( openmodals.pop().el ).modal('show'); // pop previous modal and show, will be pushed on show 
        }
    } else if( openmodals.length > 0 ){
        openmodals.pop(); // last modal closing, empty the stack
    } 
  });
});

참고URL : https://stackoverflow.com/questions/13649459/twitter-bootstrap-multiple-modal-error