2016/06/10 jQuery プラグインを作成しました 2016/06/07 ベージに横スクロールバーが出ている場合や、小さなコンテンツで、ブラウザが大きく開いている場合に対応すると、load と resize イベントで的確な設定をする必要がありました。 Stack Overflow でとてもいいサンプルがあったのでご紹介します、ただ、サンプルでは汎用性に欠けるので、どこでも使えるように改造しました。 対象コントロールをクリックすると、コントロール以外が暗転します 対象コントロールにクラスを設定し、そのクラスは position:relative; にしておきます。後は、overlay 用の div の作成と、jQuery のイベント登録です。
div は css で大きさを明示する必要があります
このブログの都合で div幅はインラインで指定しています
オリジナルからの改造の最も重要な点は、暗転用の div を、jQuery で BODY に追加して高さを動的に設定して使用してるところです。これは、ブログ等の複雑な HTML 構造の場合に有効だと思います。単純なページならば、オリジナルと同じように height:100% で良いかと思います
<style>
.example {
background:#fff;
border:1px solid pink;
cursor:pointer;
margin:5px; padding:20px;
height:100px;
}
.expose {
position:relative;
}
#overlay {
background:rgba(0,0,0,0.3);
display:none;
position:absolute; top:0; left:0; z-index:99998;
}
</style>
<div
class="expose example"
style="width:300px!important;">div は css で大きさを明示する必要があります</div>
<br>
<textarea
class="expose" style="width:300px;height:100px;">入力できます</textarea><br>
<br>
<input
type="text"
class="expose"
value="入力できます"
style="width:300px;"><br>
<br>
<div
class="expose example"
style="width:300px!important;">このブログの都合で div幅はインラインで指定しています</div>
<br><br>
<script>
$(function(){
$( '<div id="overlay"></div>' ).appendTo( 'body' );
$('.expose').click(function(e){
$(this).css('z-index','99999');
$('#overlay').fadeIn(300);
});
$('#overlay').click(function(e){
$('#overlay').fadeOut(300, function(){
$('.expose').css('z-index','1');
});
});
$(window).on("load resize", function(){
if ( document.documentElement.clientWidth < Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) ) {
$('#overlay').css("width", Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) +'px');
}
else {
$('#overlay').css("width", "100%");
}
if ( document.documentElement.clientHeight < Math.max(document.documentElement.scrollHeight,document.body.scrollHeight) ) {
$('#overlay').css("height", Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+'px');
}
else {
$('#overlay').css("height", "100%");
}
});
});
</script>
この場合セレクタは 
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
