BlouckUI：BlockPage高度等于BlockOverlay高度

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