simpleModal 플러그인을 사용하여 스크롤하는 방법

대화 상자의 텍스트가 너무 길 때 모달 : true를 사용하는 경우에도 스크롤하려고하지만 전체 페이지가 스크롤되는 경우 SimpleModal 플러그인 http://www.ericmmartin.com/projects/simplemodal/ 을 사용하고 있습니다.simpleModal 플러그인을 사용하여 스크롤하는 방법

대화의 끝 부분을 볼 수 없으므로 maxHeight를 정의 해보십시오.하지만 효과가없는 것으로 보입니다.

어떤 아이디어가 있습니까?

코드 :

function loadDialog(Code,vrsnNum) 
{ 
    vrsnNum=vrsnNum-1; 
    $.get(
    "/ajaxVerision.asp", 
    {Code: Code,VerisionNum: vrsnNum}, 
    function(data) 
    { 
    $(".CrnrPager").html(data); 
    } 
    ); 

    $.get(
    "/ajaxVerisionNext.asp", 
    {Code: Code,VerisionNum: vrsnNum}, 
    function(data) 
     { 
     $("#sp1").html(data); 
     } 
    ); 

    $('#basic-modal-content').modal({maxHeight: 400,autoPosition : true, position: ['20%','25%']}); 
}

출처

2011-01-20 Gooloosh

당신은이 같은 modal() 전화, 뭔가에 일부 CSS를 할당을 시도 할 수 있습니다 : 또한

$('#basic-modal-content').modal({ 
    maxHeight: 400, 
    autoPosition: true, 
    containerCss: { 
     'maxHeight' : '400px', 
     'overflow' : 'auto' 
    }, 
    position: ['20%', '25%'] 
});

당신은 또한 dataCss 속성을 사용할 수 있습니다.

출처

2011-01-20 12:50:12 polarblau

을 내가 추가 "폭 : 490px; 오버 플로우 엑스 : 숨겨진; _height : 400 픽셀을, 최대 높이를 : 400 픽셀을, 오버 플로우 - y로 : 자동;" data-div 스타일로 옮겨서 문제를 해결해 주셔서 감사합니다. – Gooloosh

너무 이것이 내가 대화 위와 아래이 적어도 10em (5em 양쪽)을두고 말한다

$('#confirmDialog').modal(
{ 
    dataCss: 
    { 
      'maxHeight': 'calc(100vh - 10em)', // spaces are needed 
      'overflow': 'auto' 
    } 
});

을 뭘하는지 지금 CSS에서 calc을 사용하는 것이 매우 안전합니다. 다행히도 창 크기를 조정하더라도이 모든 것이 잘 조정됩니다.

나는 100vh - 10em과 함께 calc 함수를 사용하는데 이는 뷰포트 높이를 취하여 1em을 뺍니다. 이 요소는 중첩 된 요소이므로 여기에서 100%을 사용할 수 없습니다. 불행히도 iOS에서 100vh은 사파리의 아이콘 표시 줄에 의해 가려진 공간을 포함하므로 항상 10MB를 빼고 항상 확인해야합니다.

참고 : 콘텐츠에 래퍼가 아닌 스타일 속성을 추가하는 dataCss을 사용하고 있습니다. 즉, 경계선이 고정되고 내용이 내부적으로 스크롤되면 경계선이있는 것입니다.

iOS에서 vh의 더 나은 이해를 위해이 읽기 : https://github.com/scottjehl/Device-Bugs/issues/36

출처

2015-04-30 20:31:35

simpleModal 플러그인을 사용하여 스크롤하는 방법

답변

관련 문제