どうも、帰りの電車では必ず隣の人に迷惑をかけます。
ライスです。
今回はちょっと技術的な話です。
まあ、たいしたアレでもないですが、ちょっと解決方法を見つけるのに手間取ったんで。
PCサイトで、ライトボックス的なJSってよく使うと思うんですが、
iPhoneとかiPadで見た時(Android端末は未検証ですごめんなさい)に、
iframeでhtmlファイルを読み込むと、
ウィンドウサイズよりモーダルウィンドウ(表現合ってるかな?)のサイズが大きい場合、
スクロールが出来ないんですよね。
iPhoneとかiPadのSafariでは、iframeのoverflowが効かない、のが原因ぽいです。
まあ、そらそうか、っていうのもあるんですけど、いかんせん、いかんせん。
参照:iPadのSafariではiframeのoverfrowが効かない
http://www.luigibox.com/00_lab/iframeForiPadSafari/
で、上記の通りやってみたんですが、
モーダルウィンドウの画面全体でスクロールを有効にしたい云々、諸々ありまして、うなってたら・・・アレですわ。
colorbox使って、モーダルウィンドウとして読み込むhtmlファイルのソースを
divで構成してやったらできました。htmlタグは使わずに、divで。
かなり強引かもしれんけど、なんとかいけました。
/*************************
<html>
<head>
・・・
</head>
<body id=”page”>
<div id=”container”>
・・・
</div>
</body>
</html>
*************************/
↓↓↓↓↓
/*************************
<div id=”page”>
<div id=”container”>
・・・
</div>
</div>
*************************/
参照:colorbox
http://www.jacklmoore.com/colorbox
色々と保証はできないですが、もし、今回のような問題でお困りの方は一度試してみてくださいまし。