Q&A
JavascriptのみではなくHtmlの方も記載いただくと問題の特定に繋がると思います。
###「colorbox.js」を使ってフォームを作成したい
ボタンをClickするとポップアップが出て来て、幾つかの質問に答えメールアドレスを入力すると結果が返ってくるような
フォームを実装したいのですが、colorbox.js内で「jquery.js」を読み込んでいるはずなのに「Uncaught TypeError」が出てしまいます。
何か別の方法で実装する必要があるのでしょうか?
###発生している問題・エラーメッセージ
下記のjsを動かしたいのですが、
$(".btnClose02").click(function(){ $('#testid').parents().colorbox.close(); return false; });
↓このようなエラーが出てcolorboxを閉じることが出来ません。
Uncaught TypeError: Cannot read property 'close' of undefined
###補足
さらに必要な情報がございましたら、お手数ですが教えて頂いてもよろしいでしょうか?
###追加情報
動かないボタンは、下記になります。
<p class="ボタンのクラス名"><a href="#"><img src="画像パス" width="" height="" alt="閉じる"></a></p>
iframeで実装しておりまして、headerタグの中にjqueryを読み込むタグも記述しているのですが。。。
<head> 省略 <script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.3"></script> <script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.0"></script> </head>
###「colorbox」の詳細
iframeで実装されているものは下記になります。また、testidのオブジェクトについても記載しております。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title><?php echo $title; ?></title> <script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.3"></script> <script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.0"></script> </head> <body id="testid"> <section id="test07" class=""> <h1 class=""><img src="" width="" height="" alt=""></h1> <p class=""><img src="" width="" height="" alt=""></p> <p class=""><img src="" width="" height="" alt=""></p> <p class=""><img src="" width="" height="" alt=""></p> <p class="btnClose02"><a href="#"><img src="" width="" height="" alt="閉じる"></a></p> </section> <script type="text/javascript"> (function ($) { jQuery(function ($) { $("btnClose02").click(function(){ $('#testid').parents().colorbox.close(); return false; }); }) })(jQuery); </script> </body> </html>
また、colorboxは下記のように設定しております。
<section id="testname"> <p class="btn"><a href="/test07.php"><img src="" width="" height="" alt=""></a></p> </section>
<script> jQuery(function($) { $("#testname").find("a").colorbox({ iframe: true, width: "936px", height: "395px" }); }) </script>
$('#testid')で取得しているtestidのオブジェクトはなんですか？
いまのところ開示されているコードの中にtestidというidが割り当てられたオブジェクトがありません。
また、iframeで実装されているとのことですが、どの部分がフレームになっているかによってJavascriptの有効範囲が違います。その辺も含めて開示していただかないと問題の特定につながりません。よろしくお願いいたします。
masaya_ohashiさんの書かれている箇所と、#testidを含む部分のHTMLと、colorboxの設定部分前後のHTMLを開示ください。
回答2件
0
追加情報のURLを見たところWordPressをご利用でしょうか。
その場合jQueryの使用には注意が必要です。
下記が参考になるかと思います。
投稿2016/06/02 08:02
総合スコア151
0
ベストアンサー
こんな感じでしょうか。
JavaScript
1$( '.btnClose02' ).click( function() { 2 parent.$.colorbox.close(); 3 return false; 4} ); // iframe内で。
【ColorBoxで表示してるiframe内のjsから自分自身をcloseする - thinking now...】
http://blog.mitsuto.com/archives/102032
【jQueryプラグイン「ColorBox」でオリジナルの閉じるボタン（Closeボタン）を設置する | blog｜blow→in】
http://blow-in.net/blog/entry-1515.html
投稿2016/06/02 11:16
総合スコア69398
あなたの回答
tips
プレビュー
