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


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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/01/06 10:59:12
  • 終了:2013/01/06 16:44:56

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922013/01/06 13:53:51

ポイント100pt

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>
他3件のコメントを見る
id:Cherenkov

回答1を更新したのでご確認ください。

2013/01/06 16:13:21
id:dy7

Cherenkovさま、ありがとうございます!

最初の回答をいただいてから設計を見直し、iframeを使わない形に修正しまして、最初にアドバイスいただいた方法で希望通りの動きを得ることができました。

さらにアドバイスいただきました「iframeを使う方法」も後ほど試してみたいと思います!
詳しい回答をありがとうございました!本当に助かりました!

2013/01/06 16:44:23

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません