트위터 부트 스트랩 모달 배경이 사라지지 않습니다

Twitter 부트 스트랩 모달 대화 상자를 사용하고 있습니다. 부트 스트랩 모달 대화 상자의 제출 버튼을 클릭하면 AJAX 요청을 보냅니다. 내 문제는 모달 배경이 사라지지 않는다는 것입니다. 모달 대화 상자가 제대로 사라지지만 화면에 불투명도를 생성하는 "모달 배경"이 그대로 유지됩니다.

어떡해?

AJAX 요청을 할 때 실제 모달 창을 포함하는 컨테이너를 교체하지 마십시오. 부트 스트랩은 닫을 때 참조를 찾을 수 없으므로 AJAX 요청을 수행하십시오. Ajax complete 핸들러에서 모달을 제거한 다음 데이터를 바꾸십시오.

그래도 작동하지 않으면 다음을 수행하여 강제로 사라지도록 할 수 있습니다.

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

처음 전화를 걸 었는지 확인하십시오 $.modal()모달 동작을 적용 위한 이 의도 한 것보다 많은 요소를 전달하지 않아야합니다. 이 경우 컬렉션의 각 요소에 대해 배경 요소가 포함 된 모달 인스턴스가 생성됩니다. 결과적으로 실제로 복제본 중 하나를 볼 때 배경이 남아있는 것처럼 보일 수 있습니다.

필자의 경우 다음과 같은 코드를 사용하여 모달 콘텐츠를 즉석에서 만들려고했습니다.

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

여기서 닫는 </div>태그 뒤의 HTML 주석은 myModal이 실제로 div와 주석이라는 두 요소의 jQuery 모음이라는 것을 의미했습니다. 둘 다 자신의 배경 요소가있는 정식으로 모달로 바뀌 었습니다. 물론 주석으로 작성된 모달은 배경과는 별개로 보이지 않으므로 실제 모달 (div)을 닫았을 때 배경이 남겨진 것처럼 보입니다.

방금이 문제에 너무 오래 보냈습니다 :)

제공된 다른 답변은 도움이되고 유효하지만 Bootstrap에서 모달 숨기기 기능을 효과적으로 다시 작성하는 것이 약간 어려워 보였으므로 더 깨끗한 솔루션을 찾았습니다.

문제는 전화를 걸 때 발생하는 일련의 이벤트가 있다는 것입니다

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

그런 다음 AJAX 요청의 결과로 많은 HTML을 바꾸면 모달-숨김 이벤트가 완료되지 않습니다. 그러나 부트 스트랩은 모든 것이 끝나면 이벤트를 트리거하며 다음 과 같이 연결할 수 있습니다.

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

도움이 되길 바랍니다.

액션 버튼에 다음을 삽입하십시오.

data-backdrop="false"

과

data-dismiss="modal" 

예:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

이 데이터 공격자를 입력하면 .modal-backdrop이 나타나지 않습니다. 이 링크에 대한 설명서 : http://getbootstrap.com/javascript/#modals-usage

getboostrap 사이트 자체에서 복사하여 HTML 생성 선택기에 붙여 넣는 경우 주석 '<!-/.modal->'을 제거하십시오. 부트 스트랩은 혼란스러워 주석이 두 번째 모달 요소라고 생각합니다. 이 "두 번째"요소에 대해 다른 백 드롭을 만듭니다.

나는 이것이 매우 오래된 게시물이라는 것을 알고 있지만 이것이 도움이 될 수 있습니다. 이것은 매우 작은 해결 방법입니다.

$('#myModal').trigger('click');

그게 문제 야

비슷한 문제가 발생했습니다. 모달 창에 "취소"와 "확인"이라는 두 개의 단추가 있습니다. 원래, 두 버튼 모두 $('#myModal').modal('hide')(이전에 코드를 실행 한 "OK" 로) 호출하여 모달 창을 닫았 으며 시나리오는 다음과 같습니다.

1. 모달 창을 엽니 다
2. 몇 가지 작업을 한 다음 "확인"을 클릭하여 유효성을 검사하고 모달을 닫으십시오.
3. 모달을 다시 열고 "취소"를 클릭하여 닫습니다
4. 모달을 다시 열고 "취소"를 다시 클릭하십시오 ==> 배경에 더 이상 접근 할 수 없습니다!

글쎄, 내 동료가 내 하루를 구했다 :을 호출하는 대신 $('#myModal').modal('hide')버튼에 속성을 부여 data-dismiss="modal"하고 "제출"버튼에 "클릭"이벤트를 추가하십시오. 내 문제에서 버튼의 HTML (well, TWIG) 코드는 다음과 같습니다.

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

내 JavaScript 코드에는 다음이 있습니다.

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

"클릭"이벤트는 "취소"버튼으로 인한 것이 아닙니다. 이제 모달이 제대로 닫히고 "일반"페이지로 다시 재생할 수 있습니다. 실제로 data-dismiss="modal"버튼이나 DOM 요소가 부트 스트랩 모달을 닫아야한다는 것을 나타내는 유일한 방법 인 것 같습니다 . 이 .modal('hide')방법은 제어 할 수없는 방식으로 작동하는 것 같습니다.

도움이 되었기를 바랍니다!

모달 창을 너무 빨리 숨기고 다시 표시하면이 문제가 발생할 수도 있습니다. 이것은 다른 곳에서 언급되었지만 아래에서 더 자세히 설명하겠습니다.

문제는 타이밍 및 페이드 전환과 관련이 있습니다. 이전 모달의 페이드 아웃 전환이 완료되기 전에 모달을 표시하면이 지속적인 배경 문제가 나타납니다 (모달 배경은 화면에 그대로 유지됩니다). 부트 스트랩은 명시 적으로 여러 동시 모달을 지원하지 않지만 숨기고있는 모달과 표시하는 모달이 동일하더라도 문제가되는 것 같습니다.

이것이 문제의 올바른 원인 인 경우 다음과 같이 문제를 완화 할 수있는 몇 가지 옵션이 있습니다. 옵션 # 1은 페이드 전환 타이밍이 실제로 문제의 원인인지 확인하기위한 빠르고 쉬운 테스트입니다.

1. 모달에 대한 페이드 애니메이션을 비활성화합니다 (대화 상자에서 "페이드"클래스 제거)
2. 모달의 텍스트를 숨기거나 다시 표시하는 대신 업데이트하십시오.
3. 이전 모달 숨기기가 완료 될 때까지 모달이 표시되지 않도록 타이밍을 수정하십시오. 이렇게하려면 모달의 이벤트를 사용하십시오. http://getbootstrap.com/javascript/#modals-events

다음은 관련 부트 스트랩 문제 추적기 게시물입니다. 아래에 나열된 것보다 더 많은 추적기 게시물이있을 수 있습니다.

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal ( 'hide')

모달을 수동으로 숨 깁니다. 모달이 실제로 숨겨 지기 전에 (즉, hidden.bs.modal 이벤트가 발생하기 전에) 호출자에게 반환 합니다.

그래서 대신

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

하다

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

"숨기기"이벤트가 끝날 때까지 기다리십시오.

이 문제를 일으킬 수있는 또 다른 실수는

bootstrap.js페이지에 스크립트를 두 번 이상 포함시키지 않았는지 확인하십시오 !

비슷한 문제가 발생해도 다음 두 개의 버튼이 있습니다.

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

나는 일부 아약스 작업을 수행하고 싶었고 그 아약스 작업의 성공으로 모달을 닫습니다. 여기 내가 한 일이 있습니다.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

data-dismiss="modal"속성 이있는 '아니오'버튼의 클릭 이벤트를 트리거 했습니다. 그리고 이것은 효과가 있었다 :)

사용하다:

$('.modal.in').modal('hide') 

출처

이 솔루션은 Ruby on Rails 3.x 및 모달을 포함하여 DOM의 일부를 재구성하는 js.erb 파일을위한 것입니다. 아약스 호출이 모달 또는 페이지의 다른 부분에서 왔는지 여부에 관계없이 작동합니다.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

시작점을위한 @BillHuertas에게 감사합니다.

$ ( '# myModal'). trigger ( 'click');

이것은 나를 위해 일했습니다. 팝업을 열 때 2 또는 3 개의 모달 배경을 트리거하기 때문에 닫히지 않습니다. 그래서 당신이 할 때 $ ( '# myModal')). modal ( 'hide'); 그것은 하나의 모달 배경과 나머지에 영향을 미칩니다.

업데이트 패널 문제.

내 문제는 업데이트 패널 배치로 인한 것입니다. 업데이트 패널에 전체 모달이 있습니다. 업데이트 패널 외부에서 모달을 선언하고 업데이트 패널에서 모달 바디를 말한 경우 $ ( '# myModalID'). modal ( 'hide'); 일했다.

이 질문에 대한 또 다른 관점. (bootstrap.js 버전 3.3.6을 사용하고 있습니다)

자바 스크립트에서 수동으로 모달을 초기화하는 실수를했습니다.

$('#myModal').modal({
   keyboard: false
})

사용하여

data-toggle="modal"

아래 예제와 같은이 버튼에서 (문서에 표시됨)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

결과는 두 인스턴스를 만듭니다

<div class="modal-backdrop fade in"></div>

모달을 열 때 내 HTML 본문에 추가하십시오. 함수를 사용하여 모달을 닫을 때 원인이 될 수 있습니다.

$('#myModal').modal('hide');

위의 그림과 같이 하나의 배경 인스턴스 만 제거하므로 배경이 사라지지 않습니다. 그러나 사용하면 사라졌습니다.data-dismiss="modal" 부트 스트랩 문서에 표시된대로 html에 add 하면 .

따라서 내 문제에 대한 해결책은 javascript에서 수동으로 모달을 초기화하고 data 속성을 사용하지 않는 것입니다.이 방법으로 수동으로 data-dismiss="modal"기능 을 사용하여 모달을 닫을 수 있습니다.

나와 같은 문제가 발생하면 도움이되기를 바랍니다.

참고로 누군가가 여전히이 문제에 부딪 칠 경우를 대비하여 최선의 방법은 다음과 같습니다.

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

모달을 닫는 기능은 매우 직관적이지 않습니다.

data-dismiss="modal"내 모달의 버튼을 추가하면 나에게 도움이되었습니다. 내 버튼이 앵귤러로 함수를 호출하여 아약스 호출을 시작하고 모달을 닫으려고했기 때문에 .toggle()함수 내에 추가하고 잘 작동했습니다. (내 경우 에는 실제 모달 컨트롤러가 아닌 a bootstrap modal를 사용하고 일부를 사용했습니다 angular).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

나는 같은 문제가 있었다. Bootstrap과 JQueryUI 간의 충돌로 인한 것으로 나타났습니다.

둘 다 "close"클래스를 사용합니다. 하나 또는 다른 클래스를 변경하면이 문제가 해결됩니다.

숨기기 대신 토글을 사용하면 문제가 해결되었습니다.

모달 컴포넌트와 관련이없는 요소에 대해 동일한 요소 Id / 클래스를 다른 곳에 사용하지 않아야합니다.

즉, 클래스 이름 'myModal'을 사용하여 모달 팝업을 트리거하는 단추를 식별하는 경우 동일한 클래스 이름을 가진 관련없는 요소가 없는지 확인하십시오.

최고 등급의 솔루션을 적용한 후 향후 모달이 제대로 열리지 않는 문제가 발생했습니다. 잘 작동하는 솔루션을 찾았습니다.

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

양식을 제출할 때도 같은 문제가있었습니다. 이 솔루션에서 버튼 유형을 변경하는 것이었다 submit에 button다음과 같이 버튼 클릭 이벤트를 처리 :

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

.net MVC4 프로젝트에서 Ajax.BeginForm (OnComplete = "addComplete"[추가 코드 삭제됨) 내부에 모달 팝업 (bootstrap 3.0)이있었습니다. "addComplete"javascript 안에 다음 코드가 있습니다. 이것은 내 문제를 해결했습니다.

$ ( '# moreLotDPModal'). hide ();

$ ( "# moreLotDPModal"). data ( 'bs.modal'). isShown = 거짓;

$ ( 'body'). removeClass ( 'modal-open');

$ ( '. modal-backdrop'). remove ();

$ ( '# moreLotDPModal'). removeClass ( "in");

$ ( '# moreLotDPModal'). attr ( 'aria-hidden', "true");

나는이 같은 문제가 있었다.

그러나 나는 bootbox.js를 사용하고 있었으므로 그와 관련이있을 수 있습니다.

어느 쪽이든, 나는 부모와 같은 클래스를 가진 요소를 가짐으로써 문제가 발생한다는 것을 깨달았습니다. 이러한 요소 중 하나를 클릭 함수를 바인딩하여 모달을 표시하는 데 사용하면 문제가 발생합니다.

즉, 이것이 문제의 원인입니다.

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

클릭하는 요소가 부모, 자식 또는 다른 조상과 동일한 클래스를 갖지 않도록 변경하십시오. 클릭 기능을 바인딩 할 때 일반적으로이 작업을 수행하는 것이 좋습니다.

나는 Meteor와 함께 일하고 있으며 같은 문제가 있습니다. 내 버그의 원인은 다음과 같습니다.

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

보시다시피 다른 모드에서 모달을 추가 했으므로 모달이 연락처 정보를 업데이트했을 때 if에 다른 상태가있었습니다. 이로 인해 모달 템플릿은 DOM이 닫히기 직전에 DOM에서 제외되었습니다.

해결책 : if-else에서 모달을 옮기십시오.

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

바이올린-> https://jsfiddle.net/o6th7t1x/4/

data-backdrop 속성 의 초기 값은

"static", "true", "false"입니다.

static 및 true 는 모달 그림자를 추가하고 false 는 그림자를 비활성화하므로 첫 번째 클릭으로이 값을 false로 변경하면됩니다. 이처럼 :

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

모달 배경 화면 정지 문제가 있었지만 약간 다른 시나리오가 있습니다 .2 연속 모달이 표시되는 경우. 예를 들어, 첫 번째는 무언가를하기 위해 확인을 요청하고 '확인'버튼을 클릭 한 후, 동작이 오류를 일으켜 오류 메시지를 팝업하기 위해 두 번째 모달이 표시 될 것입니다. 두 번째 모달 배경은 화면을 정지시킵니다. 클래스 이름이나 요소의 id에는 충돌이 없었습니다.

문제가 해결 된 방식은 브라우저에 모달 배경을 처리 할 수있는 충분한 시간을 제공하는 것이 었습니다. '확인'을 클릭 한 후 즉시 조치를 취하는 대신 브라우저에 500ms라고 말하여 첫 번째 모달을 숨기고 배경을 정리하십시오. 그런 다음 오류 모달을 표시하는 조치를 취하십시오.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

_dialogConfirmed () 함수에는 다음 코드가 있습니다.

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

다른 솔루션은 브라우저에 필요한 정리 시간을 제공하는 데 충분한 시간이 더 걸리기 때문에 효과가 있다고 생각합니다.

ASP.NET에서 jquery 명령 뒤에 코드 뒤에 UpdatePanel에 대한 업데이트를 추가하십시오. 예:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();