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 回答