모달 팝업이 있는데 브라우저 높이보다 큰 내용을로드 할 때 스크롤하여 나머지 정보를 볼 수 없습니다. 대신 배경은 스크롤 할 수 있지만 팝업은 표시되지 않습니다.어떻게하면 모달 팝업이 내용을 페이지로 스크롤 할 수 있습니까?
대신 팝업을 넣고 싶습니다. 사용자가 위 또는 아래로 스크롤하면 팝업이 제자리에 남기고 내용의 맨 아래로 스크롤 할 수 있습니다. Facebook에서 매우 긴 게시물을 만들면 팝업이 올바르게 작동하고이 컨트롤로 어떻게 동일한 효과를 얻을 수 있는지 알고 싶습니다.
컨테이너 블록에 overflow: auto 스타일을 넣으십시오.
모달 팝업의 CSS에서 모달 팝의 너비를 설정 한 다음 overflow:auto을 설정하십시오. 그러면 수평 스크롤바가 생깁니다. 예 :
.ModalPopupPanel
{
width:900px;
overflow:auto;
}
따라서 콘텐츠 너비가 900px를 초과하면 가로 스크롤바가 표시됩니다. modalpop의 높이를 설정해야하는 세로 스크롤 막대에서도 마찬가지입니다.
브라우저 화면이 900px 이상이면 문제가 해결됩니다. 해당 페이지를 채울 수있는 팝업이있는 솔루션은 내 대답을 참조하십시오. – DavRob60
이 스크립트는 팝업 높이를 화면 높이의 90 %로 설정 한 다음 오버플로 : 자동을 설정할 수 있습니다.
<script type="text/javascript">
function pageLoad() {
$get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
</script>
여기에서 내가 물어 본 관련 질문과 해결책을 찾았습니다.
asp.net ModalPopupExtender : need to show scroll bar when overflow
당신은 팝업이 스크롤바를 숨길 열려있을 때 body 태그에 클래스를 추가하고 제거 팝업이 사라질 때, 당신의 배경이 위치해야 할 수 있습니다 고정 높이가 있어야한다 window.height() (JS로 동적으로 가져옴), overflow : auto.
팝업이 배경보다 커지면 오른쪽에 멋진 스크롤 막대가 표시되고 본문 스크롤 막대가 숨겨져 있기 때문에 그 중 하나만 볼 수 있습니다. 또한 페이지 자체가 스크롤되지 않습니다. 그것이 페이스 북이 사진 뷰어와 함께하는 방식입니다.
당신은 그것의 contens와 modalpopup 스크롤이 시도 할 수 있습니다 : 설정 PopupDragHandleControlID 빈 패널을 가리키는, 세트 들어 오도록 모드 = "없음"이 페이지를 스크롤과 같은 위치에 고정 모달을 유지합니다.
간단하고 최상의 작동 해결책
해당 클래스를 모달 팝업 페이지에 추가하십시오.
body.modal-open {
overflow: auto;
}
당신은 컨테이너 블록 당신은 무엇으로 다스 려하는 말? 또한 실제로 이것을 테스트 해 보셨습니까? 모달 팝업을 통해 보급 된 패널에 두 페이지의 컨텐츠를 넣고 패널 자체에 스크롤 막대가 없어도 페이지를 스크롤하여 모든 것을 볼 수 있습니까? – Middletone
내가 시도 할 때 제안한 것이 작동하지 않기 때문에 묻습니다. 저는 div와 panels을 스크롤 할 수 있다는 것을 압니다. 그러나 그것은 제가 묻고있는 것이 아닙니다. – Middletone