부트 스트랩 라이트 클래스 "가시 태블릿"과 "눈에 보이는 전화"

Question

에 나는이 원래 부트 스트랩 라이트 박스를 사용하고 때 나타나지 않습니다 http://jbutz.github.io/bootstrap-lightbox/

나는 그것을 아래로 벗기고 DIV 클래스 "visible-tablet" 및 "visible-phone"에 이미지 링크. 이 클래스에서 팝업 이미지가 나타나지 않습니다. 여기 예를 들어 :

http://www.getaveo.com/_bootstrap4/lightbox4.html

1) 900px 이상, 바탕 화면보기에서 해당 페이지를 참조하시기 바랍니다. 오른쪽의 빨간색 열에있는 이미지 미리보기 이미지를 클릭하십시오. 큰 이미지가 표시되고 라이트 박스가 작동합니다.

2) 이제 ipad보기 또는 700px와 같이 브라우저를 작게 만드십시오. "눈에 보이는 타블렛"때문에 빨간 열이 튀어 나옵니다. 이제 이미지 미리보기 이미지를 클릭하십시오. 큰 이미지 팝업이 나타나지 않고 작동하지 않습니다.

3) 휴대 전화보기 500px 이하와 동일합니다. "visible-phone"이미지 미리보기 이미지를 클릭하십시오. 큰 이미지 팝업이 나타나지 않고 작동하지 않습니다.

"visible-tablet" 및 "visible-phone" 인 경우 이미지 미리보기 이미지가 팝업되도록하려면 어떻게해야합니까?

Answer 1

라이트 박스가있는 fluid-row 클래스에는 "visible-desktop"클래스가 있습니다. 창 크기를 줄이면 전체 div가 숨겨집니다. 부모 div 표시가 이제 none이므로 - 모든 자식 (라이트 박스 포함)은 숨겨집니다. 이는 HTML에 고유하지 않은 ID가 있기 때문에 발생합니다. 요소의 id는 고유해야합니다. 동일한 div id = "demoLightbox"를 여러 번 사용합니다. 그래서 첫 번째 것을 선택합니다.

각 버전 (데스크톱, 테이블, 전화)에 대해 별도의 div ID를 만듭니다.