blockUI可滚动内容

Question

我喜欢blcokUI插件。我在我的项目中到处使用它。最近，我需要在blockUI对话框中注入动态html。基本上内容是图像预览。大多数时候，照片所需的空间比屏幕本身要大。

我尝试了很多我能想到的解决方案，包括在blockUI中有一个单独的可滚动的div，而没有运气。

有人做过这事吗？

编辑：代码如下；

如何调用blockUI：

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

dropbox内容：

<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

您可以在您的blockMsgClass中使用BlockUI参数来修改用于单个对话的类。由于这些是内联添加的，为了使某些css属性工作，您将需要包含!important。

知道了这一点，你就可以做这样的事情：

$('#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对话可以根据需要滚动。