Fight the Future

Java言語とJVM、そしてJavaエコシステム全般にまつわること

JavaScript(jQuery)でオーバーレイした画面を表示する

programming

画面にレイヤーをかぶせて子画面を表示するような、よくある作りを実装する。

jQueryを使うけど、プラグインとしてFancyBoxを使うと楽にできた。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.google.com/jsapi"></script>
<script>
	google.load("jquery", "1.4.2");
</script>
<link href="css/jquery.fancybox-1.3.1.css"
	rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript"
	src="js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#test").fancybox({
		'padding'	: 0,
		'margin'	: 0,		
		'speedIn'	: 1000,
		'scrolling'	: 'auto',
		'type'		: 'iframe',
		'width'		: 818,
		'height'	: 894
	});
});
</script>
</head>
<body>
<center><a id="test" href="test.jsp">test</a></center>
</body>
</html>

リンクをクリックすると、グレーのレイヤーが全画面にかかり、指定した大きさでリンク先を表示する。

FancyBoxなら閉じるボタンもデフォルトで出る（設定で出ないようにもできる）。