간단한 모달 대화 상자의 크기를 조정하는 방법

Question

ericmmartin 단순 모드 대화 상자가 더 넓고 커졌습니다. 필자의 요구 사항은 콘텐츠가 긴 경우 상자의 설정을 사용하여 대화 상자에 스크롤 막대가 표시된다는 것입니다.

주어진 CSS 예제를 변경하면 다음과 같습니다. # simplemodal-container {height : 360px; 너비 : 600px; 의 폭 : 700px; 내용이 대화 상자를 아래로 오버플로합니다. .

나는 에릭의 예에서와 같이, 클릭에 호출 폭을 설정하려고하면 : $를 ("# 샘플을") 모달 ({ 의 minHeight : 400, 의 minWidth : 600 });

(http://www.ericmmartin.com/projects/simplemodal/) 변경되지 않습니다. 좋은 아이디어 있으십니까? 이상적으로 콘텐츠가 500px보다 길면 항상 세로 스크롤 막대를 표시하는 모달과 같은 오류가 발생합니다.

Answer 1

height 및 을 으로 설정하여 모달이 스크롤 막대를 표시하지 않고 해당 내용에 따라 자동으로 크기가 조정되도록합니다.

편집은 모달이 고정 된 높이와 모달 컨테이너 그러나 당신이 CSS를 통해 할 overflow:scroll

Answer 2

스타일과 크기의 설정 CSS 속성을 보자. 그런 다음 jQuery를 통해 모달 대화 상자를 인스턴스화 할 때 '자동'크기 옵션을 사용하여 대화 상자의 크기를 동적으로 처리합니다.

필자의 경우 동일한 페이지에 나타날 수있는 모달 대화 상자가 두 개 이상 있습니다. SimpleModal 대화 상자가 모달 컨테이너를 감싸므로 Simplemodal-container 클래스에 너비와 높이를 전체적으로 적용하는 것은 불가능합니다.

이것은 방금 작업 한 샘플 마크 업입니다.

<div id="accountCanceled" class="simplemodal-container"> 
    <div id="cancelWrap" class="box"> 
     <!-- Modal dialog markup goes here, all styled by an external CSS. --> 
    </div> 
</div> 

위의 #cancelWrap div의 너비를 설정하는 CSS의 일부입니다.

#cancelWrap { 
    width: 100%; 
    max-width: 560px; 
} 

그리고 관련 jQuery가 있습니다.

$canceledAlert = $('#accountCanceled'); 
    $canceledAlert.modal(
    { containerCss: { 
      height: 'auto', 
      width: 'auto', 
     } 
    } 
); 

'자동'설정을 따옴표로 묶어야합니다.

이 SimpleModal 대화 상자가 표시되면 컨테이너의 크기가 #cancelWrap div의 내용에 맞게 동적으로 조정됩니다. 희망이 사람을 도움이됩니다.