부트 스트랩 동적 내용의 모달 바닥 글

Question

모달 내 양식의 경우 부트 스트랩 모달 바닥 글을 사용하여 양식과 관련된 오류를 표시하도록 선택했습니다. 오류로 인해 바닥 글이 사용할 수있는 것보다 더 큰 높이가 필연적으로 발생하는 경우 약간의 불만이 발생합니다. 더 높이가 필요한 것은 괜찮아요.하지만 높이를 맨 위에 추가하고 모달 바디의 높이를 줄여서 모달 전체가 같은 높이를 유지하도록하고 싶습니다. 아래쪽에 추가하면 내용이 화면 밖으로 밀려납니다. 모달 바디는 너무 키가 크고 세로 스크롤 막대를 추가하여 모달 바닥 글 높이를 수용하기 위해 모달 바디 높이를 기꺼이 포기할 이유가있는 내용을 설명합니다.

제가 언급 한 이미지의 링크를 추가했습니다. 모달 푸터는 내용이 예상대로 확장되지만 바닥에 높이를 추가하여 화면 밖으로 밀 때 나머지 모달 바닥 글에 액세스 할 수 없게됩니다. 몸체에서 높이를 훔쳐서 바닥 글의 추가 높이가 맨 위에 추가되고 모달의 전체 높이가 같은 크기로 유지되도록합니다.

는 내가 아직 발견하지 않은 간단한 수정이있을거야하지만 난 이미 다른 사람들이 공유 할 해결책을 발견 한 경우 누군가 보면 계속하면서 내가 물어 줄 알았는데. 어떤 도움이라도 대단히 감사 할 것입니다. 미리 감사드립니다.

Answer 1

일반적으로 부트 스트랩 모달은 고정 된 positionong을 사용합니다. 내용이 커질 경우 스크롤 막대가 모달 안에 나타납니다.

스크롤 막대가없는 긴 모달을 사용하려면 먼저 모달 위치를 absolute으로 변경해야합니다. 그러나 사이트 콘텐츠가 길면 top 속성 값을 추가해야합니다. 지금은 모달이 현재 브라우저보기가 아닌 전체 사이트에 수직으로 배치되어 있기 때문에 % top은 더 이상 작동하지 않습니다.

.modal { 
    position: absolute; 
    top: 100px; 
} 

브라우저 스크롤바를 사용하면 스크롤 할 수 있습니다.

다음으로 모달 스크롤바를 제거하려면 max-height: inherit을 modal-body 클래스에 추가하십시오. 이제 스크롤 막대가없는 내용에 따라 모달이 커집니다.

.modal .modal-body { 
    max-height: inherit; 
} 

예 이러한 단점이 있습니다. 가장 큰 것 중 하나는 페이지 맨 아래에 모달을 시작하면 페이지 상단에 팝업이 표시되므로 보지 못할 수도 있다는 것입니다. 이 문제는 모달 실행 후 js 스크롤 상단 스크립트를 추가 할 수 있습니다.

$('#myModal').on('show', function() { 
    $("body").animate({ 
     scrollTop:0 
    }); 
}); 

희망 하시겠습니까?