Result

jQuery

$(document).ready(function(){
   //高さを取得
   var docHeight = $(document).height();
   //全体にオーバーレイ用のdivを加える
   $("body").append("<div id='overlay'></div>");

   $("#overlay")
       //オーバーレイ用に追加したdivにcssを加える。普通はクリックイベントと併用します
       //最初からcssに記載しといた方がスッキリしますね。
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'width': '100%',
         'z-index': 5000
      });
});

via

Append Site Overlay DIV | CSS-Tricks

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7