화면 너비에 따라 부트 스트랩 모달을 숨기려면 어떻게합니까?

모달 사이트를 사용 중이며 모바일에 숨길 수 없습니다.화면 너비에 따라 부트 스트랩 모달을 숨기려면 어떻게합니까?

모달의 부모 div를 숨기기 위해 @media를 시도했지만 배경이 나타나고 모든 것이 손상됩니다.

누락 된 부분을 조건부로 해제하는 간단한 방법이 있어야합니다. 감사!!

2014-12-29 robbintt

모달이에 "숨겨진-XS"클래스를 트리거 버튼을 숨길 이유 뭔가를 클릭에 시작됩니다 : 당신이 그들을 사용하지 않도록 설정하면 모달을 사용하지 않도록 설정합니다. 이것은 768px 미만의 뷰포트 너비를 숨기려면 모바일에서 실제로 사용하지 않으려면 js를 사용하여 터치 장치인지 여부를 스니핑합니다. 그것은 다른 대답입니다. – Christina

이 모달은 페이지로드시 발생하므로 불행히도 버튼을 숨길 수는 없습니다. 터치 장치 솔루션은 재미있을 것입니다. 더 많은 설명이 필요한 설명서에 대한 링크가 있습니까? 그것은 질문에 대답하지 않을 것이지만 그것에 대해 읽고 싶습니다. – robbintt

이 스크립트를 사용합니다 : https://coderwall.com/p/egbgdw/detect-touch-events-on-all-major-mobile-platforms – Christina

저는 크롬 관리자를 통해 부트 스트랩 모달 클래스와 ID를 기반으로 요소를 숨김으로써이를 해결할 수있었습니다.

참고 : 다른 부트 스트랩 모달을 시작하려고하면 이러한 CSS 클래스가 발생하므로 문제가 발생할 수 있습니다. 전체 스택을 제어하지 않으면 자바 스크립트 솔루션을 찾는 것이 좋습니다.

모달은이 세 가지로 구성됩니다.

/* Hide a modal below a specific width */ @media (max-width: 767px) { .modal-backdrop { display: none !important; } #myModalDiv { display: none !important; } .modal-dialog { display: none !important; } }

출처

2014-12-29 03:22:34 robbintt

좋은 답변이라고 확신하지 못합니다. 나는 최근에 부트 스트랩의 JavaScript가 화면에 두 개의 모달이있을 때 스택 오버플로가되는 버그에 노출되었습니다. 이와 같이 모달을 단순히 숨기면 다른 팝업 창이 나타나면 문제가 발생할 수 있습니다. –

한 페이지의 여러 위치에서 이러한 클래스를 사용하는 경우이 작업을 정확하게 수행하면 안됩니다. 조건부로 (@media 동안) 숨길 수있는 모달에 적용 할 수있는 동일한 클래스의 두 번째 집합을 만드는 것이 좋습니다. 이것은 여전히 너무 복잡 할 수 있습니다. 나는 당신이 언급 한 것이 왜 문제를 일으키는 지 분명히 봅니다. 아마도 부트 스트랩에서 여러 모달을 허용하는 것이 더 나은 방법 일 것입니다. – robbintt

화면 너비에 따라 부트 스트랩 모달을 숨기려면 어떻게합니까?

답변

관련 문제