ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: JavaScript : ページを半透明にして固定ウインドウを開く
名前: lightbox
処理選択
パスワード

件名 JavaScript : ページを半透明にして固定ウインドウを開く
名前 lightbox
コメント
IE では標準モードでないと正しく動作しません
@HTML
<script type="text/javascript">
function scriptTest(evt) {

	// ページ全体を覆う DIV の作成
	window.ds = document.createElement('div');
	ds.setAttribute('id','ds')
	ds.style.position='absolute';
	ds.style.width='100%';
	ds.style.height=document.getElementsByTagName("HTML")[0].scrollHeight+200+'px';
	ds.style.left='0px';
	ds.style.top='0px';

	// IE8 までは、opacity プロパティが使えないようです
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("msie") > -1) {
		ds.style.display = 'none';
		ds.style.backgroundColor = '#000000';
		ds.style.filter='alpha(opacity=50)';
	}
	else {
		ds.style.backgroundColor = '#000000';
		ds.style.opacity=.5;
	}

	// ページの最後に追加
	document.body.appendChild(ds);

	// IEのみ後表示
	if (userAgent.indexOf("msie") > -1) {
		ds.style.display = '';
	}

	// ページの手前で固定位置で動かない div を作成
	window.ds2 = document.createElement('div');
	ds2.setAttribute('id','ds2')
	ds2.style.position='fixed';
	ds2.style.width='400px';
	ds2.style.height='200px';
	ds2.style.left='100px';
	ds2.style.top='100px';
	ds2.style.backgroundColor = '#ffffff';
	document.body.appendChild(ds2);

	// div 内のコンテンツ( 元の状態に戻すボタン )	
	ds2.innerHTML = 
		'<INPUT type=button value="close" onclick="document.body.removeChild(ds);document.body.removeChild(ds2)">'

}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>
@HEND

@DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
</head>
<body>
<script type="text/javascript">
function scriptTest(evt) {

	// ページ全体を覆う DIV の作成
	window.ds = document.createElement('div');
	ds.setAttribute('id','ds')
	ds.style.position='absolute';
	ds.style.width='100%';
	ds.style.height=document.getElementsByTagName("HTML")[0].scrollHeight+200+'px';
	ds.style.left='0px';
	ds.style.top='0px';

	// IE8 までは、opacity プロパティが使えないようです
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("msie") > -1) {
		ds.style.display = 'none';
		ds.style.backgroundColor = '#000000';
		ds.style.filter='alpha(opacity=50)';
	}
	else {
		ds.style.backgroundColor = '#000000';
		ds.style.opacity=.5;
	}

	// ページの最後に追加
	document.body.appendChild(ds);

	// IEのみ後表示
	if (userAgent.indexOf("msie") > -1) {
		ds.style.display = '';
	}

	// ページの手前で固定位置で動かない div を作成
	window.ds2 = document.createElement('div');
	ds2.setAttribute('id','ds2')
	ds2.style.position='fixed';
	ds2.style.width='400px';
	ds2.style.height='200px';
	ds2.style.left='100px';
	ds2.style.top='100px';
	ds2.style.backgroundColor = '#ffffff';
	document.body.appendChild(ds2);

	// div 内のコンテンツ( 元の状態に戻すボタン )	
	ds2.innerHTML = 
		'<INPUT type=button value="close" onclick="document.body.removeChild(ds);document.body.removeChild(ds2)">'

}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>

<br><br>
<img src="http://lightbox.cocolog-nifty.com/photos/app003/twitlink_b1.jpg" galleryimg="no" style='border-style:solid;border-width:1px;border-color:#000000' alt="Twitlink_b1" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>
@END