人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

「TinyBox2」で表示したモーダルウィンドウのサイズ変更方法を教えて下さい。

現在、「TinyBox2」というJSライブラリを使ってモーダルウィンドウを生成し、その中に別ページを表示しています。
内部に表示する別ページから、モーダルウィンドウのサイズを動的に変更したいのですが、どのようにすれば良いでしょうか?
どうぞよろしくお願い致します。


●質問者: dy7
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

JavaScript Modal Windows ? TinyBox2 - Web Development Blog
ここで配布されているZIPの中のサンプルコード(advanced.html)に書いてありました。
モーダルウィンドウに表示するページで以下のようにJSでTINY.box.sizeを呼べば動的にサイズ変更できます。

<a href="javascript:TINY.box.size(450,350,1)">expand</a>

TinyBox 2 - javascript modal windows
こちらのデモページの「Ajax, Advanced Functions」のところです。

======

追記
便利なのでjQuery使いました。
親ページに以下のようなコードを追加してください。boxidを付けてiframeから自身のiframeを捉えるのがミソです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="button" value="openModal" onclick="TINY.box.show({iframe:'resizeModal.html',boxid:'tinyBoxIframe1',width:300,height:150})">

iframeのページ(resizeModal.html)を以下のようにします。

<script>
function iframeResize(w, h) {
 var win = top;
 var $ = win.$;
 $(function() {
 win.TINY.box.size(w, h);
 $('#tinyBoxIframe1 iframe').width(w).height(h);
 });
}
</script>
<a href="javascript:iframeResize(450,350);">expand</a>


追記2
postMessage APIを使った別解。モダンブラウザ向け。(jqueryで適当なイベントをtrigger&bindすればpostMessageじゃなくていいと思うけど)
親ページ

<!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" />
<title>TinyBox2 - JavaScript Modal Windows</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="tinybox.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<input type="button" value="openModal" onclick="TINY.box.show({iframe:'resizeModal2.html',boxid:'tinyBoxIframe1',width:300,height:150})">
<script type="text/javascript">
window.onmessage = function(event){
 var data = JSON.parse(event.data);
 var width = data.width;
 var height = data.height;
 TINY.box.size(width, height);
 $('#tinyBoxIframe1 iframe').width(width).height(height);
}
</script>
</body>
</html>

iframeのページ(にresizeModal2.html)

<script>
function iframeResize(w, h) {
 var win = top;
 win.postMessage(JSON.stringify({width:w, height:h}), '*');
}
</script>
<p>This content came from an Ajax request. Using TinyBox you can easily <a href="javascript:iframeResize(450,350);">expand</a></p>

dy7さんのコメント
Cherenkovさま、回答ありがとうございます。 説明不足で失礼致しました。 内部で表示内容がページ遷移を伴うため、iframeを使っています。 デモページの4つめの「TINY.box.show({iframe:〜〜」の形です。この場合ですと、ご回答いただいた方法ではサイズ変更できないようです。 何か方法がありますでしょうか? 度々恐れ入りますが、何卒よろしくお願い致します。

Cherenkovさんのコメント
parent.TINY.box.sizeのようにするとどうでしょう。

Cherenkovさんのコメント
parentとかtopだけだとiframe自体のサイズが変わらないのでケアする必要がありますね。少々お待ちを。

Cherenkovさんのコメント
回答1を更新したのでご確認ください。

dy7さんのコメント
Cherenkovさま、ありがとうございます! 最初の回答をいただいてから設計を見直し、iframeを使わない形に修正しまして、最初にアドバイスいただいた方法で希望通りの動きを得ることができました。 さらにアドバイスいただきました「iframeを使う方法」も後ほど試してみたいと思います! 詳しい回答をありがとうございました!本当に助かりました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ