0

모달 모달을 사용하고 있습니다. 창의 크기에 따라 내용이 너무 커서 화면에 맞지 않을 수 있습니다.파운데이션 5를 너무 크게했을 때 모달 스크롤 할 수있게하려면 어떻게해야합니까?

내가하는 일과 관계없이 모든 콘텐츠를 보려면 스크롤 할 수 없습니다. 나는 모달 자체를 overflow-y : auto;로 만들려고했으나 이것은 도움이되지 못했다.

아래 스크린 샷은 모바일 장치의 크기로 설정된 크롬 창에서 가져온 것입니다. 폼의 맨 아래에 볼 수 없기 때문에 누를 수없는 버튼이 있습니다.

창이나 모달 내용이 스크롤됩니다. 또한 모달의 상단이 너무 낮아 보이지만 하단의 버튼에 대한 접근성을 변경하지는 않습니다.

enter image description here

답변

0

당신은 임계 값 높이overflow-y이 고려되고 스크롤 막대가 표시되는 후 공개 모달에 대해 언급해야합니다.

.reveal-modal 
{ 
    max-height:initial; //reset any max-height set by foundation defaults 
    height:600px; //replace value with your desired height 
    overflow-y:scroll; 
} 
+0

이 문제는 화면 크기에 따라 항상 작동하지 않는 고정 된 높이라는 점입니다. 나는 그것이 bandaid라고 생각하지만 다른 방법을 찾아 냈다. – DAB

+0

여러 화면과 함께 사용하는 것이 문제라면 css 미디어 쿼리를 사용하여 화면마다 다른 높이를 언급 할 수 있습니다. 또는'px' 값 대신'%'값을 언급 할 수도 있습니다. 그러나 완전성을 목표로한다면 미디어 쿼리를 다시 사용해야합니다. –

0

모바일 모드에서 높이를 20 % 및 100vh로 설정하면 높이를 60 %로 설정할 수있었습니다. 또한 대화 상자의 위치를 ​​고정으로 변경하고 스크롤 설정을 비활성화해야만했습니다. 5.2.2 이후에 새로 추가 된 이유는 최근 업데이트 이후에이 문제가 발생하기 시작한 이유를 설명하는 것입니다. 이러한면에서

<div id="myModal" class="reveal-modal full" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 

:

https://github.com/macdabby/Lightning/commit/202ae9156ebf034c8cb4b625161015763fa0658f

0

"모달 공개"와 높이가 스크롤을 100 %로 설정됩니다 클래스 "전체"추가 : 이것은 내가 할 수 있었던 것입니다 모드, 나는 배경 오버레이 문제가 있었다 (& 국경 그림자) 것으로 나타났습니다, 그래서 난 배경 오버레이 제거하려면 다음 CSS를 추가 :

<style> 
.reveal-modal { 
    border:0 none; 
    box-shadow:none; 
} 
.reveal-modal-bg { 
    background-color: transparent; 
} 
</style> 

을 여기가 my example page

관련 문제