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から高さ：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>
于 2012-09-11T07:05:00.600 に答える