(追記/2011.12.02)ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。
jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。
サンプルはこちら
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="common/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="common/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="common/js/init.js" type="text/javascript"></script>
<title>modal window</title>
</head>
<body>
<div id="modal">
<div class="background"></div>
<div class="container"></div>
</div><!-- modal -->
<ul>
<li><a href="test-01.html" class="modal">ウィンドウ1</a></li>
<li><a href="test-02.html" class="modal">ウィンドウ2</a></li>
<li><a href="test-03.html" class="modal">ウィンドウ3</a></li>
</ul>
</body>
</html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="common/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="common/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="common/js/init.js" type="text/javascript"></script>
<title>modal window</title>
</head>
<body>
<div id="modal">
<div class="background"></div>
<div class="container"></div>
</div><!-- modal -->
<ul>
<li><a href="test-01.html" class="modal">ウィンドウ1</a></li>
<li><a href="test-02.html" class="modal">ウィンドウ2</a></li>
<li><a href="test-03.html" class="modal">ウィンドウ3</a></li>
</ul>
</body>
</html>
jQueryを使ってリストのリンクをクリックで「href」のアドレスを参照し、「div#modal div.container」に対してコンテンツを読み込み、表示します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| @charset "utf-8";
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
div#modal {
display: none;
position: fixed;
width: 100%;
height: 100%;
}
div#modal div.background {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.75;
filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
}
div#modal div.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffffff;
} |
@charset "utf-8";
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
div#modal {
display: none;
position: fixed;
width: 100%;
height: 100%;
}
div#modal div.background {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.75;
filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
}
div#modal div.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffffff;
}
CSSでは、モーダルウィンドウの背景を黒(#000000)の透明度75%としています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| $(function() {
setModal();
})
function setModal() {
//HTML読み込み時にモーダルウィンドウの位置をセンターに調整
adjustCenter("div#modal div.container");
//ウィンドウリサイズ時にモーダルウィンドウの位置をセンターに調整
$(window).resize(function() {
adjustCenter("div#modal div.container");
});
//背景がクリックされた時にモーダルウィンドウを閉じる
$("div#modal div.background").click(function() {
displayModal(false);
});
//リンクがクリックされた時にAjaxでコンテンツを読み込む
$("a.modal").click(function() {
$("div#modal div.container").load($(this).attr("href"), data="html", onComplete);
return false;
});
//コンテンツの読み込み完了時にモーダルウィンドウを開く
function onComplete() {
displayModal(true);
$("div#modal div.container a.close").click(function() {
displayModal(false);
return false;
});
}
}
//モーダルウィンドウを開く
function displayModal(sign) {
if (sign) {
$("div#modal").fadeIn(500);
} else {
$("div#modal").fadeOut(250);
}
}
//ウィンドウの位置をセンターに調整
function adjustCenter(target) {
var margin_top = ($(window).height()-$(target).height())/2;
var margin_left = ($(window).width()-$(target).width())/2;
$(target).css({top:margin_top+"px", left:margin_left+"px"});
} |
$(function() {
setModal();
})
function setModal() {
//HTML読み込み時にモーダルウィンドウの位置をセンターに調整
adjustCenter("div#modal div.container");
//ウィンドウリサイズ時にモーダルウィンドウの位置をセンターに調整
$(window).resize(function() {
adjustCenter("div#modal div.container");
});
//背景がクリックされた時にモーダルウィンドウを閉じる
$("div#modal div.background").click(function() {
displayModal(false);
});
//リンクがクリックされた時にAjaxでコンテンツを読み込む
$("a.modal").click(function() {
$("div#modal div.container").load($(this).attr("href"), data="html", onComplete);
return false;
});
//コンテンツの読み込み完了時にモーダルウィンドウを開く
function onComplete() {
displayModal(true);
$("div#modal div.container a.close").click(function() {
displayModal(false);
return false;
});
}
}
//モーダルウィンドウを開く
function displayModal(sign) {
if (sign) {
$("div#modal").fadeIn(500);
} else {
$("div#modal").fadeOut(250);
}
}
//ウィンドウの位置をセンターに調整
function adjustCenter(target) {
var margin_top = ($(window).height()-$(target).height())/2;
var margin_left = ($(window).width()-$(target).width())/2;
$(target).css({top:margin_top+"px", left:margin_left+"px"});
}
リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。
|