Jquery

$(function() {
	$('.overbtn').click(function() {
		$(".overlay").fadeToggle();
		});
	$('.overlay').click(function() {
		$(".overlay").fadeToggle();
		});
});

CSS

.overlay {
	position: fixed;
	top: 0;
	z-index: 3;
	display: none;
	width: 96%;
	padding: 2%;
	height: 100vh;
	background-color: rgba(0,0,0,10.8);
}

HTML

<div class="overlay"></div>
<button class="overbtn">PUSH</button>

サンプル

前回のやり方ではできなくなっていたため代替案を用意しました。
代えといっても基本的なjavascriptでDOMの書き換えをしているだけです。

先に画像や独自レイアウトのHTMLをいじっておく必要があります。

<p id="ha"><img src="header.jpg" alt="" /></p>
<p id="hb"><img src="header2.jpg" alt="" /></p>

トップとサブページで所定の箇所の表示を変更

ウィジットでコードを挿入します。

<script> //<![CDATA[ 
window.onload=function(){ var ha=document.getElementById('ha'); 
ha.style.display='none'; 
var hb=document.getElementById('hb'); 
hb.style.display='block'; 
} //]]> </script>

displayでオンオフしているだけですね。

消すだけなら非表示にしたいページにdisplay:none;を入れるだけですが、切り替えるとなるとトップページをはじめ全ページにひとつずつ入れるため手間がかかります。

$autoUPdate = date('m');

switch ($autoUPdate) {
  case 1:
    $month = '画像URL';
    break;
  case 2:
    $month = '画像URL';
    break;
  case 3:
    $month = '画像URL';
    break;
  case 4:
    $month = '画像URL';
    break;
  case 5:
    $month = '画像URL';
    break;
  case 6:
    $month = '画像URL';
    break;
  case 7:
    $month = '画像URL';
    break;
  case 8:
    $month = '画像URL';
    break;
  case 9:
    $month = '画像URL';
    break;
  case 10:
    $month = '画像URL';
    break;
  case 11:
    $month = '画像URL';
    break;
  case 12:
    $month = '画像URL';
    break;
  default:
    $month = '画像URL';
    break;
}
echo "<img src=\"$month\" />";

PHPについてはほぼ勉強していないので・・・もっとよいやり方はあると思います。
よくわからないですが、置いときます。