Question

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

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>

BlouckUI：BlockPage高度等于BlockOverlay高度

1 个答案: