2

私は blcokUI プラグインが大好きです。プロジェクトのいたるところで使用しています。最近、blockUI ダイアログ内に動的な html を挿入する必要がありました。基本的に内容はイメージプレビューです。ほとんどの場合、写真に必要なスペースは画面自体よりも大きくなります。

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>
4

1 に答える 1

2

blockMsgClassBlockUI でパラメーターを使用して、個々のダイアログに使用されるクラスを変更できます。!importantこれらはインラインで追加されるため、一部の css 属性を機能させるためには、含める必要があります。

これを知っていると、次のようなことができます：

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

次に、CSSで：

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

これにより、BlockUI ダイアログ全体が必要に応じてスクロール可能になります。

于 2014-01-31T02:47:47.437 に答える