ＳＱＬの窓
<< javamail-android +… | TOP | Lightbox2 で data-… >>

2016年06月10日


とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル

 
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>
【jQueryの最新記事】
posted by lightbox at 2016-06-10 22:55 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり