jquery - blockUI 可滚动内容

Question

我喜欢 blcokUI 插件。我在我的项目中到处都使用它。最近，我需要在 blockUI 对话框中注入(inject)动态 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>

Answer 1

您可以在 BlockUI 中使用 blockMsgClass 参数来修改用于各个对话的类。由于这些是内联添加的，您需要包含 !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 对话框可根据需要滚动。