Twitter 부트 스트랩 스크롤 가능 모달

작업중인 프로젝트에 트위터 부트 스트랩을 사용하고 있습니다.

나는 그 안에 약간 더 긴 형태의 모달 창이 있고 창이 너무 작아지면 모달이 스크롤되지 않는 것을 좋아하지 않았습니다 (스크롤 할 수없는 내 페이지에서 사라진 경우).

이 문제를 해결하기 위해 다음 CSS를 사용했습니다.

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

이것은 Chrome에서 원하는 방식으로 정확히 작동합니다 (즉, 창이 충분히 크면 양식이 전체 크기이지만 창이 축소되면 모달이 축소되고 스크롤 가능해집니다). 문제는 IE에서 모달이 화면 밖에 있다는 것입니다. 누구든지이 문제에 대한 더 나은 해결책이 있습니까?

내 예제는 tinyhousemap.com에서 찾을 수 있습니다 (모달을 표시하려면 탐색 창에서 '지도에 항목 추가'를 클릭하세요).

감사

아래 솔루션은 어떻습니까? 그것은 나를 위해 일했습니다. 이 시도:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

세부:

1. .modal 클래스에서 overflow-y: auto;또는 제거 overflow: auto;(중요)
2. 수업 max-height: 400px;에서 제거 .modal(중요)
3. 추가 max-height: 400px;로 .modal .modal 바디 (또는 이제까지 무엇을, 할 수있다 420px이하,하지만보다 더 갈 것입니다 450px)
4. 추가 overflow-y: auto;로.modal .modal-body

완료, 본문 만 스크롤됩니다.

저는 jQuery 만 사용하여 작은 솔루션을 수행했습니다.

먼저 <div class="modal-body">"ativa-scroll"이라는 추가 클래스를 추가해야 하므로 다음과 같이됩니다.

<div class="modal-body ativa-scroll">

이제 JS 로딩 근처에이 코드를 페이지에 넣으십시오.

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

나는 나를 위해 완벽하게 작동하며 반응 형으로도 작동합니다! :)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

이것은 JS 코드가없는 Bootstrap 3에서 작동하며 반응합니다.

출처

부트 스트랩의 시도 및 재정의 :

 .modal {
position: fixed;

와:

.modal {
position: absolute;

그것은 나를 위해 일했습니다.

나는 또한 추가했다

.modal { position: absolute; }

스타일 시트에 추가하여 대화 상자를 스크롤 할 수 있지만 사용자가 긴 페이지의 맨 아래로 이동 한 경우 모달은 표시되는 영역의 맨 위에 숨겨 질 수 있습니다.

나는 이것이 더 이상 부트 스트랩 3에서 문제가 아니라는 것을 이해하지만 업그레이드 할 때까지 비교적 빠른 수정을 찾고 모달을 열기 전에 위와 다음을 호출하는 것으로 끝났습니다.

$('.modal').css('top', $(document).scrollTop() + 50);

FireFox, Chrome, IE10 8 및 7 (내가 손에 넣은 브라우저)에서 행복해 보입니다.

당신의 모달은 파이어 폭스에서 숨겨지고 있으며, 이는 일반 스타일 시트 안에있는 음의 여백 선언 때문입니다.

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

음수 여백을 제거하면 모든 것이 잘 작동합니다.

를 사용 .modal {overflow-y: auto;}하는 경우 본문 이 이미 넘 쳤을 때 페이지 오른쪽에 추가 스크롤바를 생성 합니다.

이에 대한 해결 방법은 일시적으로 body 태그 에서 오버플 로를 제거 하고 modal overflow-y 를 auto로 설정하는 것 입니다.

예:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

@grenoult의 CSS 솔루션 (대부분 작동)의 문제는 키보드가 팝업 될 때 (즉, 모달 대화 상자에서 입력을 클릭 할 때) 완전히 반응하고 모바일에서 화면 크기가 변경되고 모달 대화 상자가 크기가 변경되고 방금 클릭 한 입력을 숨길 수 있으므로 입력중인 내용을 볼 수 없습니다.

나에게 더 나은 해결책은 다음과 같이 jquery를 사용하는 것입니다.

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

창 크기 변경에 반응하지 않지만 어쨌든 그렇게 자주 발생하지 않습니다.

.modal-body 요소에서 max-height와 함께 "vh"메트릭을 사용하여이 문제를 극복 할 수있었습니다. 70vh는 내 용도에 적합하다고 생각했습니다. 그런 다음 overflow-y를 자동으로 설정하여 필요할 때만 스크롤되도록합니다.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

이 중 어느 것도 예상대로 작동하지 않습니다. 올바른 방법은 위치를 변경하는 것입니다 : 고정 위치 : .modal 클래스의 절대 위치