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>