ソース掲示板




すべてから検索

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

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

対象スレッド 件名: IFRAME ウインドウを非表示から開く時の位置調整
名前: lightbox
処理選択
パスワード

件名 IFRAME ウインドウを非表示から開く時の位置調整
名前 lightbox
コメント
要するに重要なのは、obj.style.top = (([[document.documentElement.scrollTop || document.body.scrollTop]])+10) + "px"; です。

これ以上は、IFRAME を初回にロードする時の待機時に、『http://logicalerror.seesaa.net/article/323408577.html(CSS だけで回る、実行中アイコン)』等を実装すればもっといいですね

@DIV
<script type="text/javascript">
// *********************************************************
// IFRAME を開く
// *********************************************************
function openIframe( @c:red(ev), strNo, strUrl ) {

	var obj = document.getElementsByName("iframe" + strNo )[0];
	obj.style.top = ((@c:red(document.documentElement.scrollTop || document.body.scrollTop)) + @c:red(ev.clientY) + 10) + "px";
	obj.style.left = ( @c:red(ev.clientX) + 200 ) + "px";
	var src = obj.src;
	if ( src + '' == '' ) {
		obj.src = strUrl;
		@c:red(obj.onload) = function() {
			document.getElementsByName("iframe" + strNo )[0].style.display = "";
		}
	}
	else {
		obj.style.display = "";
	}
}
// *********************************************************
// IFRAME を閉じる
// *********************************************************
function closeIframe( strNo ) {

	var obj = document.getElementsByName("iframe" + strNo )[0];
	obj.style.display = "none";
}
</script>
@END

@DIV
<iframe
	name="iframe1"
	frameborder="1"
	scrolling="yes"
	width="500"
	height="500"
	style='position:absolute;display:none;'
></iframe>


<div style='padding-top:200px;padding-bottom:1000px;'>
<input type="button" value="開く" onclick='openIframe(@c:red(event), "1","http://winofsql.jp")'>
<input type="button" value="閉じる" onclick='closeIframe("1")'>
</div>
@END


@HTML
<script type="text/javascript">
// *********************************************************
// IFRAME を開く
// *********************************************************
function openIframe( ev, strNo, strUrl ) {

	var obj = document.getElementsByName("iframe" + strNo )[0];
	obj.style.top = ((document.documentElement.scrollTop || document.body.scrollTop) + ev.clientY + 10) + "px";
	obj.style.left = ( ev.clientX + 200 ) + "px";
	var src = obj.src;
	if ( src + '' == '' ) {
		obj.src = strUrl;
		obj.onload = function() {
			document.getElementsByName("iframe" + strNo )[0].style.display = "";
		}
	}
	else {
		obj.style.display = "";
	}
}
// *********************************************************
// IFRAME を閉じる
// *********************************************************
function closeIframe( strNo ) {

	var obj = document.getElementsByName("iframe" + strNo )[0];
	obj.style.display = "none";
}
</script>
<iframe
	name="iframe1"
	frameborder="1"
	scrolling="yes"
	width="500"
	height="500"
	style='position:absolute;display:none;'
></iframe>


<div style='padding-top:100px;padding-bottom:600px;'>
<input type="button" value="開く" onclick='openIframe(event, "1","http://winofsql.jp")'> <input type="button" value="閉じる" onclick='closeIframe("1")'>
</div>
@HEND