モーダルダイアログをスクロールしたい

前回の悩みは回答者様のおかげで解決することができたのですが、新たな課題が発生しました。

というのも高さの大きい画像を表示しようとするとウインドウの枠をはみ出てしまうのです。

なのでスクロール処理を入れたいと思っています。
その方法をお伺いしたいです。

それを実現するために以下のようにしてbody部分の高さを調節しようとしました。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5	<meta charset='utf-8' />
6	<link rel="stylesheet" href="colorbox.css" />
7	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
8	<script src="https://cdn.jsdelivr.net/colorbox/1.6.3/jquery.colorbox-min.js"></script>
9</head>
10
11<body>
12	<!-- リンク -->
13	<p><a class='inline' href="#inline_content">Inline HTML</a></p>
14
15	<!-- 表示されるモーダルダイアログ -->
16	<div style='display:none'>
17		<div id='inline_content'>
18			<div id="header" style="height:50px; background:aqua;"></div>
19			<div id="body" style='padding:10px; background:pink;'>
20				<p><strong>インラインHTML</strong></p>
21				<input type="file" name="upfile" id="upfile">
22				<div><img id="thumbnail" src=""></div>
23			</div>
24			<div id="footer" style="height:50px; background:aqua;"></div>
25		</div>
26	</div>
27
28</body>
29<script>
30	$(function() {
31		// モーダルダイアログを表示
32		$(".inline").colorbox({
33			inline: true,
34			width: "70%",
35			maxHeight: "90%",
36			opacity: "0.4",
37		});
38
39		// 画像表示
40		$('#upfile').change(function() {
41			if (this.files.length > 0) {
42				// 選択されたファイル情報を取得
43				var file = this.files[0];
44
45				// readerのresultプロパティに、データURLとしてエンコードされたファイルデータを格納
46				var reader = new FileReader();
47				reader.readAsDataURL(file);
48
49				reader.onload = function() {
50					$('#thumbnail').attr('src', reader.result);
51
52					// リサイズ
53					$.colorbox.resize();
54
55					// スクロール処理
56					var _cBoxH = $('#cboxLoadedContent').css('overflow','visible').height();
57					var _headerH = $('#header').height();
58					var _footerH = $('#footer').height();
59					$('#body').height(_cBoxH - _headerH - _footerH);
60
61				}
62			}
63		});
64	});
65</script>
66
67</html>
68

しかしこのようにしても上記の画像のようにはみ出てしまいます。
もう一度左上の「Inline HTML」のリンクを押すと綺麗に表示でき、スクロールすることができています。

スクロール時

これを画像表示したタイミングで行えるようにしたいのですが、どうすればいいでしょうか？

もしわかる方がいらっしゃれば教えていただけると大変有難いです。
よろしくお願い致します。

行動規範の内容に同意します

回答2件

失礼は承知の上で申し上げますが、一連の質問と回答、それに対する k499778 さんのコメントを拝見しているかぎりでは、k499778 さんは、javascript のイベントドリブンの基本をしっかり理解した上で、自分の書いたコードおよび理想とする動きにおいて、イベントの発生やそのハンドラの起動が時間軸上でどの順で発生しているのか、もう少し考えたほうがいいと思います。それができなさそうな人にはこういうアドバイスはしませんが、今、そこでもがき苦しんで自己解決を目指した方が、成長できる（図に描かなくても理想の動きがすっとコードに書き出せるようになる）と思うのです。
無論、「自分は成長なんかしなくていい、とりあえず納期までに作らなければならない」というのなら話は別です。

と突き放すだけもアレなので、未検証ですがぱっとコードを見た感じで「ここが問題かな」というポイントについて、ヒントだけ。

#body のサイズ調整と、colorbox のサイズ自動調整のタイミングはどうなっていますか

投稿2016/04/26 00:18

unau

総合スコア2468

k499778

2016/04/26 00:42 編集

回答ありがとうございます。スクロール処理後にリサイズしないといけないよね。ということでしょうか？実際それは試してリサイズとスクロール処理の書く場所も逆にしてみたのですが、それでもうまくいきませんでした。うまくいかないというのは具体的に言うと、ダイアログのサイズが画像表示する前と変わらず、さらに画像が切れてしまうという状況です。その動きが現状のコードよりひどくなってしまったため、現状のコードで投稿させていただいております。それも踏まえて何かアドバイス頂けるようであれば教えていただけると大変助かります。

unau

2016/04/26 00:43

colorbox のリファレンスを見ると、イベントのフックもありますので、それを使うといいのかもしれません。 http://cly7796.net/wp/javascript/plugin-jquery-colorbox/

k499778

2016/04/26 00:53 編集

返答ありがとうございます。このリンク先ももちろん見ています。イベントのフックというのはなんでしょうか？ colorboxで使えるイベントやプロパティがあるよ。ということを意味しているのでしょうか？

unau

2016/04/26 01:26

k499778 さんは、自身でいろいろ考えてコードを提示した上で質問されているので、teratail というサービスにおいても、良質なコンテンツ充実に貢献している、これからも貢献が期待できる人、と私はたいへん評価しております。ので、徐々に回答やコメントをメタレベルにシフトしています。意地悪のようでごめんなさい。「このリンク先ももちろん見ています」ということであれば、「見る」だけじゃなくて「熟読」してみてください。「イベントのフックとはなにか」も熟読すればぼんやりとでもわかってくるのではないかと思います。わからないとしたら、イベントドリブンの基本が理解できていないか、「見ている」だけで「熟読」していないか、のどちらかだと思います。

k499778

2016/04/26 03:10 編集

返答ありがとうございます。評価していただきありがたく思います。 unauさんも毎回大変質の高い回答をくださるのだとても毎回感謝しています。自分では熟読しているつもりですが、どうしても経験のある方と比べると吸収できる質や量が変わってきてしまうため、少しお力添えを頂ければと思っていました。しかしアドバイス頂いた通り、もう一度熟読した上で結果をお伝えさせていただきます。一旦失礼致します。

unau

2016/04/26 05:08

どうしてもわからなければまた聞いてください。ここにコメントでも。

行動規範の内容に同意します

以下のようなコードで大きさまでは制御できました。スクロールだけ表示できません。もう一度「Inline HTML」のリンクを押すとスクロールできます。

ダイアログが大きい時はウインドウサイズの０．９倍の大きさにする制御を追加しました。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5	<meta charset='utf-8' />
6	<link rel="stylesheet" href="colorbox.css" />
7	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
8	<script src="https://cdn.jsdelivr.net/colorbox/1.6.3/jquery.colorbox-min.js"></script>
9</head>
10<style>
11html {
12    height: 100%;
13}
14
15body {
16    height: 100%;
17    margin: 0;
18}
19</style>
20<body>
21	<!-- リンク -->
22	<p><a class='inline' href="#inline_content">Inline HTML</a></p>
23
24	<!-- 表示されるモーダルダイアログ -->
25	<div style='display:none'>
26		<div id='inline_content'>
27			<div id="header" style="height:50px; background:aqua;"></div>
28			<div id="body" style='padding:10px; background:pink;'>
29				<p><strong>インラインHTML</strong></p>
30				<input type="file" name="upfile" id="upfile">
31				<img id="thumbnail">
32				<!-- <div><img id="thumbnail" src=""></div> -->
33			</div>
34			<div id="footer" style="height:50px; background:aqua;"></div>
35		</div>
36	</div>
37
38</body>
39<script>
40	$(function() {
41		// モーダルダイアログを表示
42		$(".inline").colorbox({
43			inline: true,
44			width: "70%",
45			maxHeight: "90%",
46			opacity: "0.4",
47			scrolling: true
48		});
49
50		// 画像表示
51		$('#upfile').change(function() {
52			if (this.files.length > 0) {
53				// 選択されたファイル情報を取得
54				var file = this.files[0];
55
56				// readerのresultプロパティに、データURLとしてエンコードされたファイルデータを格納
57				var reader = new FileReader();
58				reader.readAsDataURL(file);
59
60				reader.onload = function() {
61					$('#thumbnail').attr('src', reader.result);
62
63					// リサイズ
64					$.colorbox.resize();
65
66					// スクロール処理
67					var _windowHeight = $(window).height() * 0.9;
68					var _cBoxH = $('#cboxLoadedContent').css('overflow','visible').height();
69					var _headerH = $('#header').height();
70					var _footerH = $('#footer').height();
71
72					if(_windowHeight < _cBoxH){
73						$('#body').height(_windowHeight - _headerH - _footerH);
74					}else{
75						$('#body').height(_cBoxH - _headerH - _footerH);
76					}
77
78					// リサイズ
79					$.colorbox.resize();
80
81				}
82			}
83		});
84	});
85</script>
86
87</html>
88