###「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>
回答2件
あなたの回答
tips
プレビュー