blockUI 스크롤 가능한 내용

나는 blcokUI 플러그인을 좋아합니다. 내 프로젝트의 모든 곳에서 사용합니다. 최근에, 나는 blockUI 대화 상자 안에 동적 html을 삽입해야했습니다. 기본적으로 콘텐츠는 이미지 미리보기입니다. 대부분의 경우 사진에 필요한 공간은 화면 자체보다 큽니다.blockUI 스크롤 가능한 내용

나는 행운이있는 blockUI 안에 별도의 스크롤 가능한 div가있는 것을 포함하여 생각할 수있는 많은 솔루션을 시도했다.

아무도 이것을 성취 한 사람이 있습니까?

편집 : 코드는 다음과 같습니다.

은 blockUI가 호출되는 방법 :

$('#addphoto').click(function (e) { 
    $('body').block({ message: $('#dropbox'), css: { top: '10px;', width: '90%', 'position': 'absolute'}, allowBodyStretch: true }) 
});

보관 용 계정의 내용 :

<div id="dropbox" style="display:none;"><span class="message">drag&drop images here</span></div> 
<div id="image_container"> 
    <div class="preview done"> 
     <span class="imageHolder"> 
      <img src="" /> 
      <span class="uploaded" style="overflow: scroll"; ></span></span> 
     <div class="progressHolder"> 
      <div class="progress"> 
      </div> 
     </div> 
    </div> 
</div>

출처

2012-09-12 Kemal Emin

몇 가지 코드를 보여주십시오. – Grumpy

코드를 포함하도록 제 질문을 수정했습니다. –

당신은 개별 대화에 사용되는 클래스를 수정하기 위해 BlockUI에서 blockMsgClass 매개 변수를 사용할 수 있습니다. 인라인에 추가되었으므로 일부 CSS 속성이 작동하려면 !important을 포함해야합니다.

이 당신이 뭔가 할 수있는 알고 : 당신의 CSS에서 다음

$('#addphoto').click(function (e) { 
    $('body').block({ 
     blockMsgClass: 'PhotoAdd', 
     message: $('#dropbox') 
    }) 
});

을 필요에 따라

.PhotoAdd{ 
Top:10px!important; 
width:90%!important; 
position: absolute!important; 
height:90%!important; 
overflow:auto!important; 
}

이 전체 BlockUI 대화를 스크롤 할 것입니다.

출처

2014-01-31 02:47:47 Jake

blockUI 스크롤 가능한 내용

답변

관련 문제