ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。（2011.12.02）
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> |
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;
} |
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"});
} |
リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。
モーダルウィンドウを使わせて頂きました。
ウィンドウが表示されるところまでは成功したのですが、Chromeのみ、白紙で出てきてしまいます。(FirefoxやSafariではテキストが表示されました。)
これは何が原因なのでしょうか。
バイセッパ — 2011.06.02 17:12
コメントありがとうございます。
こちらの環境ではChrome（Mac／Win）で確認してみたところ、テキストリンクで指定したHTMLファイルを読み込んで、表示することができました。
ウィンドウが白紙のままということなので、おそらくHTMLファイルの読み込みが完了できていない状態のようです。
読み込みは、上記JavaScriptコードの30行目の箇所で行っています。
原因についてですが、もしかして設定されたHTMLファイルのURLに若干間違いがあるか、HTMLファイルの内容に何らかの問題（文字コードなども含め）があるのかもしれません。
almondlab. — 2011.06.02 17:48
迅速な御指摘ありがとうございます。
あれからしばらくしてChromeに表示されたのですが、更新すると表示されなかったりと不安定な状態が続いております。
何度かHTMLを見直したのですが間違いはありませんでした。
Javascriptの読み込みが遅いだけかもしれませんが、もう少し検証してみたいと考えています。
非常に分かり易く使い易いモーダルウィンドウですので、これからも使わせて頂きたいと思います。
ありがとうございました。
バイセッパ — 2011.06.05 23:38
こんにちは。
モーダルウインドウをサイトに利用したく設置したところ、
モーダルウインドウの位置がセンターになりません。
ブラウザのウインドウサイズをリサイズすると、
センターになります。
何が原因か教えていただけると助かります。
衣 — 2012.02.07 18:07
こんにちは。
サンプルサイトを確認させていただきました。
原因についてですが、jQueryにてモーダルウィンドウの横幅サイズを取得できないことにあるようです。
解決策として、こちらで確認したところ、現在読み込まれているjQueryのバージョンを「1.3.2」から「1.4.4」以降にアップデートすることで解決できるようです。
もし、何らかの理由でjQueryのバージョンアップをできない場合には、
「common.js」の97行目、
var margin_left = ($(window).width()-$(target).width())/2;
の部分で、
「$(target).width()」の箇所を、実際のモーダルウィンドウの横幅サイズに置き換えても大丈夫だと思います。
一度お試しください。
almondlab. — 2012.02.07 18:32
早速ご返信頂きましてありがとうございます。
GoogleサーバーのjQueryの読み込み部分を「1.4.4」にアップデートしたところ、無事解決できました！
ありがとうございました。
衣 — 2012.02.07 18:58
この投稿へのコメントの RSS フィード。
TrackBack URL