모달을 표시 할 때 드롭 다운을 숨기기

모달 윈도우에 약간의 문제가 있습니다. 어떤 이유로이 문제를 파악할 수 없습니다. 모바일에서 햄버거 메뉴가 있는데 메뉴에 모달 창을 여는 로그인 링크가 있습니다. 모든 것이 작동하고 모달이 표시되지만 문제는 다음과 같습니다. 드롭 다운 메뉴가 내 모달 위에 표시됩니다.모달을 표시 할 때 드롭 다운을 숨기기

$(document).ready(function() { 

    var modal = $('.modal'); //get modal window 

    if(modal.hasClass("in")){ //check if it has class "in" 
    $('.navbar-toggleable-md').hide(); //true, hide navbar 
    } 

}); // end ready

내가 무엇을 놓치고 :

나는 사용하여 숨기려? 위의 코드는 아무 것도하지 않기 때문에 ..

출처

2016-11-29 Ovidiu G

코드를 완성 할 수 있습니까? –

메뉴의 클릭 핸들러에서 숨길 수 있습니다. 귀하의 코드는 클래스 – anu

$ ('. navbar-toggle')에 대해서만 한 번만 검사합니다. trigger ('click') –

show.bs.modal 또는 shown.bs.modal의 이벤트를 .modal에 잡아야합니다. 이런 식으로 뭔가 :

$(document).ready(function() { 
    $('.modal').on('shown.bs.modal', function (e) { 
     $('.navbar-toggleable-md').hide(); 
}); 
});

읽기 부트 스트랩 문서 : modals-events

출처

2016-11-29 12:29:51 Banzay

문제가 될 수 있습니다. Z- 인덱스 –

문제는 실제로 z- 인덱스와 관련되었지만 여기서 내가 성취하기를 원하는 것이 아닙니다. 왜냐하면 Z- 인덱스를 설정하더라도 메뉴가 뒤쳐져서 예를 들어 테이블에 계속 표시되기 때문입니다. 그러나 그는 사건을 포착하는 것이 옳았다. 이것은 문제를 해결했습니다. 감사! 나는 그것들에 대해 조금 더 읽을 것이다. –

우리 모델에는 z- 인덱스에 문제가 있다고 생각합니다. 귀하의 모달의 Z- 색인을 증가 시키십시오. 또는 귀하의 코드를 피델리로 제공해주십시오.

출처

2016-11-29 12:00:45

가의 z-index을 설정하여 모달 큰 드롭 다운의 z-index보다. 예 :

.modal { 
    z-index: 999; 
} 
.dropdown { 
    z-index: 99; 
}

출처

2016-11-29 12:51:56 Aca85

모달을 표시 할 때 드롭 다운을 숨기기

답변

관련 문제