BlouckUI: BlockPage height等于BlockOverlay height

Question

我正在使用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>

Answer 1

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

我所做的是，从css中删除高度: 100%，并添加overlayCSS {不透明度: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>