SQLの窓

2014年06月27日


jQuery/JavaScript : 暗転ボタン

WEB ページ全体を暗い DIV で覆って操作できないようにして、その上に DIV を乗せてコンテンツを表示します。確実に DIV でページを覆うために、サイズは2倍にしていますが、iPhone 等のスマホで向きを変える場合など、イベント対応しない場合に有効です。

※ 暗転後のコンテンツの位置は、暗転を行うコントロールを基準に表示するようにしています。

IE 用の処理の中で、jQuery を使っていない部分がありますが、元々 DOM でテスト済みなのを jQuery でテストする意味もあまりなかった(古いIE用なので)のでそのままにしています。

<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
// *********************************************************
// 暗転時に操作するウインドウの作成
// *********************************************************
$(function(){

	$("#win_base")
		.hide()
		.css({
			position: "absolute",
			color: "#000000",
			backgroundColor: "#E0E0E0",
			borderStyle: "solid",
			borderColor: "#303030",
			borderWidth: "1px",
			width: "0px",
			height: "0px",
			borderRadius: "6px",
			zIndex: 0x7fffffff
		});


	$("#win_base input")
		.attr("type", "image")
		.prop("src", "http://winofsql.jp/image/mcancel.png")
		.css("float", "right")
		.click(function(){
			$(this.parentNode).hide();
			$(window["dark_modal"]).remove();
		});
});

// *********************************************************
// 暗転時に操作するウインドウを target 基準の指定位置に表示
// *********************************************************
function setDark(target,x,y,w,h) {

	setDarkModal();

	var numY = target.offsetTop;
	var numX = target.offsetLeft;
	var obj = target;
	while( obj = obj.offsetParent ) {
		numY += obj.offsetTop;
		numX += obj.offsetLeft;
		if ( obj.tagName.toUpperCase() == 'BODY' ) {
			break;
		}
	}
	$("#win_base").css( "top", (numY+y) + "px" );
	$("#win_base").css( "left", (numX+x) + "px" );
	$("#win_base").css( "width", w + "px" );
	$("#win_base").css( "height", h + "px" );
	$("#win_base").show();
}

// *********************************************************
// 暗転用の DIV を作成
// *********************************************************
function setDarkModal(){
	var dark_modal = document.createElement('div');
	$(dark_modal)
		.attr('id','dark_modal')
		.css( {
			position: "absolute",
			width: Math.max(document.documentElement.scrollWidth,document.body.scrollWidth)*2+'px',
			height: Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)*2+'px',
			left: "0px",
			top:  "0px"
		});
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("msie") > -1) {
		$(dark_modal).hide();
		var appVersion = window.navigator.appVersion.toLowerCase();
		if (appVersion.indexOf("msie 10.0") > -1) {
			$(dark_modal).css({
				backgroundColor: "#000000",
				opacity: 0.5
			});
		}
		else {
			dark_modal.style.backgroundColor = '#000000';
			dark_modal.style.filter='alpha(opacity=50)';
		}
	}
	else {
		$(dark_modal).css({
			backgroundColor: "#000000",
			opacity: 0.5
		});
	}

	$("body").append(dark_modal);
	if (userAgent.indexOf("msie") > -1) {
		dark_modal.style.display = '';
	}

	window["dark_modal"] = dark_modal;
}
</script>

<input type="button" value="暗転ボタン" onclick='setDark(this,100,0,200,50);'>

<div id="win_base" style='display:none'><input>
<div id=win_box style='padding:2px;'>ここにコンテンツ</div>
</div>
関連する記事

JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました
JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く
JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )



タグ:javascript jquery
【jQueryの最新記事】
posted by lightbox at 2014-06-27 10:19 | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり