- 締切済み
Fancyboxを分割ウィンドウで全面表示するには
2分割したフレームのウィンドウで、 上フレームのボタンをクリックすると、 fancyboxのiframeをページ全体、もしくは下フレーム内に ポップアップさせたいのですが可能でしょうか？ 他のlightbox系プラグインでも構いません。（jQuery、IE6～8対応可希望です） target指定など試してみましたが上手くいかず…。 どなたかご存知でしたらご教授よろしくお願いします。
- qwan645
- お礼率0% (0/7)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
No.4です。 >>動いてますか？ <frameset rows="50,*" border="0">だと。確かに、No.5さんのようになります。 すみません。 <frameset rows="250,*" border="0"> ぐらいにして試してました。
- reggaepunc
- ベストアンサー率59% (64/108)
>>No.4 動いてますか？ 私の環境ではなぜかfancybox内でエラーでます。 No.4さんの方法だと「上のフレーム」にfancyboxがでますよね？添付した画像のように。
補足
ご回答ありがとうございます。 私も同じような状態になりました。 もう少し調べてみたいと思います。
- yyr446
- ベストアンサー率65% (870/1330)
何も工夫しなくても、フレームセットのフレーム内でも、Fancyboxのiframeちゃんと動作しましたけど...↓ （head_in.html） <?xml version="1.0" encoding="utf-8" ?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>ヘッド内html</title> <link rel="stylesheet" href="/jslib/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript" src="/jslib/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a.iframe").fancybox({ 'width':'75%', 'height':'75%', 'autoScale':false, 'transitionIn':'none', 'transitionOut':'none', 'type':'iframe' }); }); </script> </head> <body id="head"> <div id="head_wrapper"> <h1 id="logo"> <img src="./common/images/logo.png" width="307" height="36" alt="ロゴ" /> </h1> <div id="nav_top" class="search"> <a href="search.html" class="iframe" target="_top">検索</a> </div> </div> <hr /> </body> </html> ※親フレームのframesetのHTMLは、No.1の補足と同じです。
- reggaepunc
- ベストアンサー率59% (64/108)
さっき投稿した説明で一点間違いがありました。 クリックしたら下のフレームに「あああ」って出るんじゃなくて、 ページを読み込んだ時点でもう「あああ」って出ます。
- reggaepunc
- ベストアンサー率59% (64/108)
さわりだけ書いてみました。 ファイル名とか勝手につくっちゃいましたが、 上フレームのボタンをクリックすると 下フレームに’あああ’と出ます。 すでにfancyboxを読み込んで、はい完成。ってレベルじゃなくなってますね。。 たぶんframesetに対応したプラグインって存在しないと思いますよ。 僕は見たことないです。 このjsが理解できなければframeset使うのやめた方が簡単に実現できそうかと思います。 このフォームに文字制限があるのでもう書けないですが、こんなオチで検討してみてください。 ■index.html -------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>フレームの使用例</title> <script> window.onload = function() { var frame = document.getElementsByTagName('frame');// frame取得 var aTag = frame[0].contentDocument.getElementsByTagName('a');// frameの中のaタグ取得 var outputBody = frame[1].contentDocument.getElementsByTagName('body'); outputBody[0].innerHTML = 'あああ'; // ========================== // クリックした時に起動する関数 // ========================== function clickEvent( e ) { //console.debug( 1 ); e.preventDefault(); } // ========================== // クリックイベント登録（ie以外） // ========================== aTag[0].addEventListener( 'click', clickEvent, false );// イベント登録 } </script> </head> <frameset rows="200,*"> <frame src="top.html" name="menu" title="メニュー"> <frame src="bottom.html" name="contents" title="コンテンツ"> </frameset> </html> -------------------------------------------------- ■top.html -------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> frame test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="top"> <p>top.html</p> <p><a class="fancybox" href="#">ボタン</a></p> </div> </body> </html>
補足
ご回答ありがとうございます。 モーダルのウィンドウを開きたいのですが、うまくいかない状態です。 もう少し調べてみます。
- reggaepunc
- ベストアンサー率59% (64/108)
親のhtmlから上のフレームのボタンのクリックイベントをとって、 親のhtmlで、 fancyboxを起動するようにするようにすれば動くはずですが、 具体的に何が上手くいってない状態ですか？ ソースを見せてもらえれば話は早いと思いますよ。
補足
下記の通りです。現状、ページは開きますが、モーダルでなく通常の開きかたです。 targetを外すと、同一ページ上であれば、モーダルは開きます。 あまりjavascriptに詳しくなく、よろしくお願い致します。 ■親フレーム <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>親フレーム</title> </head> <frameset rows="50,*" border="0"> <frame src="head_in.html" name="head" scrolling="none" /> <frame src="main.html" name="main" /> <noframes>省略… ■フレームhead内html <!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>ヘッド内html</title> <link rel="stylesheet" href="./common/css/common.css" type="text/css" media="screen" /> <link rel="stylesheet" href="./common/js/fancybox/fancybox.css" type="text/css" media="screen" /> <script…javascript読み込み部分省略 <script type="text/javascript"> $(document).ready(function() { //Activate FancyBox $(".fbox").fancybox({ 'hideOnContentClick':true, 'overlayShow': true }); $("div#right a").fancybox({ 'hideOnContentClick': true, 'overlayShow': true }); }); </script> </head> <body id="head"> <div id="head_wrapper"> <h1 id="logo"><img src="./common/images/logo.png" width="307" height="36" alt="ロゴ" /></h1> <div id="nav_top" class="search"><a href="search.html" class="iframe" target="_top">検索</a></div> </div> </body> </html>
補足
ご回答ありがとうございます。 No4の方法で試してみましたが、上フレームに表示されてしまいます。 フレームサイズを250にしてみましたが、 やはり上フレームに表示されてしまいます。