Jquery BlouckUI:BlockPage高度等于BlockOverlay高度

我使用blockui在页面上显示某些文本。文本的长度因页而异。在某些页面上，它比页面高度短得多，在这些情况下，如果我滚动到可见页面高度以下，我可以看到透明背景而不是黑色背景，如上一节所示。我检查了一下，发现blockOverlay的高度是100%，blockPage的高度也是100%

前者覆盖整个页面，直到页面结束，但前者仅覆盖浏览器上的可见高度，之后如果您在下方滚动，则会看到一个透明层

相关代码片段：

<script>
    $(document).ready(function() {
        $('#reader').click(function() {
            $.blockUI({
                message: $('#fs-reader'),
                css: {
                    top: 0,
                    left: 0,
                    height: '100%',
                    width: '100%',
                    background: '#000000'
                }
            });
            $('.blockUI.blockPage').css('position', 'absolute');
            $('.close').click(function() {
                $.unblockUI();
                return false;
            }); 
        });
    });
</script>

<span id="reader">view in reader</span>
<div id="fs-reader" style="display: none;">
    <button class="close">Close</button>
    <div id="reader-content">
        <!-- The text goes in here -->
    </div>
</div>

$（文档）.ready（函数（）{
$（“#读取器”）。单击（函数（）{
$.blockUI({
信息：$（“#fs阅读器”），
css:{
排名：0，
左:0,，
高度：“100%”，
宽度：“100%”，
背景：“#000000”
}
});
$（'.blockUI.blockPage'）.css（'position'，'absolute'）；
$（'.close'）。单击（函数（）{
$.unbui（）；
返回false；
}); 
});
});
读者视野
接近

我找错人了。解决方案很简单，它在blockUI文档中

我所做的是，从css中删除height:100%并添加overlycss{opacity:1}。所以，代码现在看起来像

<script>

    $(document).ready(function() {
        $('#reader').click(function() {
            $.blockUI({
                message: $('#fs-reader'),
                css: {
                    top: 0,
                    left: 0,
                    height: '100%',
                    background: '#000000'
                },
                overlayCSS: {
                    opacity: 1
                }
            });
            $('.blockUI.blockPage').css('position', 'absolute');
            $('.close').click(function() {
                $.unblockUI();
                return false;
            }); 
        });
    });
</script>

<span id="reader">view in reader</span>
<div id="fs-reader" style="display: none;">
    <button class="close">Close</button>
    <div id="reader-content">
        <!-- The text goes in here -->
    </div>
</div>

$（文档）.ready（函数（）{
$（“#读取器”）。单击（函数（）{
$.blockUI({
信息：$（“#fs阅读器”），
css:{
排名：0，
左:0,，
高度：“100%”，
背景：“#000000”
},
覆盖层：{
不透明度：1
}
});
$（'.blockUI.blockPage'）.css（'position'，'absolute'）；
$（'.close'）。单击（函数（）{
$.unbui（）；
返回false；
}); 
});
});
读者视野
接近

我找错人了。解决方案很简单，它在blockUI文档中

我所做的是，从css中删除height:100%并添加overlycss{opacity:1}。所以，代码现在看起来像

<script>

    $(document).ready(function() {
        $('#reader').click(function() {
            $.blockUI({
                message: $('#fs-reader'),
                css: {
                    top: 0,
                    left: 0,
                    height: '100%',
                    background: '#000000'
                },
                overlayCSS: {
                    opacity: 1
                }
            });
            $('.blockUI.blockPage').css('position', 'absolute');
            $('.close').click(function() {
                $.unblockUI();
                return false;
            }); 
        });
    });
</script>

<span id="reader">view in reader</span>
<div id="fs-reader" style="display: none;">
    <button class="close">Close</button>
    <div id="reader-content">
        <!-- The text goes in here -->
    </div>
</div>

$（文档）.ready（函数（）{
$（“#读取器”）。单击（函数（）{
$.blockUI({
信息：$（“#fs阅读器”），
css:{
排名：0，
左:0,，
高度：“100%”，
背景：“#000000”
},
覆盖层：{
不透明度：1
}
});
$（'.blockUI.blockPage'）.css（'position'，'absolute'）；
$（'.close'）。单击（函数（）{
$.unbui（）；
返回false；
}); 
});
});
读者视野
接近