SQLの窓 イラストAC フリー素材

2016年06月10日

クリックした入力フィールド以外をブラックアウトする jQuery プラグイン


クリックして他をブラックアウトしている間だけ、position:relative になります。それで問題の無いフィールドに使えると思います。
$.fn.extend({
	blackOut: function(){
		if ( $("#overlay_blackout" ).length == 0 ) {
			$( '<div id="overlay_blackout"></div>' ).appendTo( 'body' )
			.css({
				"background": "rgba(0,0,0,0.3)",
				"display": "none",
				"position": "absolute",
				"top": "0",
				"left": "0",
				"z-index": "99998"
			});

			$(window).on("load resize", function(){
				if ( document.documentElement.clientWidth < Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) ) {
					$('#overlay_blackout').css("width", Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) +'px');
				}
				else {
					$('#overlay_blackout').css("width", "100%");
				}
				if ( document.documentElement.clientHeight < Math.max(document.documentElement.scrollHeight,document.body.scrollHeight) ) {
					$('#overlay_blackout').css("height", Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+'px');
				}
				else {
					$('#overlay_blackout').css("height", "100%");
				}
		
			});

		}

		$(this).click(function(){
			$(this).css('position', 'relative');
			$(this).css('z-index', 0x7fffffff);
			$('#overlay_blackout').fadeIn(300);
		});

		var base = this;
		$('#overlay_blackout').click(function(){
			$(this).fadeOut(300, function(){
				$(base).css('position', 'static');
				$(base).css('z-index', 'auto');
			});
		});


	}
});


※ 入力関係以外でも、大きさを持つ要素ならば使えると思います
※ 環境によっては、'<div id="overlay_blackout"></div>' ではなく '<span id="overlay_blackout"></span>' にするといい場合があります( 例 : mmenu を使う場合 )


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