Question

我喜欢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>

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对话框可以根据需要滚动。

blockUI可滚动内容

1 个答案: