1

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

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

相关代码片段：

<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>
4

1 回答 1

1

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

我所做的是，从 css 中删除 height: 100% 并添加 overlayCSS { 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>
于 2012-09-11T07:05:00.600 回答