【jQuery】Colorboxでページ遷移してしまう不具合の対処法

最近、弊社の管理するwebサイトでそのようなことがあったので修正の覚書です。

本来colorboxはクリックするとモーダルが立ち上がりその中に指定の画像や動画・webページを表示するjQueryプラグインなのですが。そのモーダルの中身を表示する前に勝手にその画像などにページ遷移してしまうという現象です。

原因

ページ内のタグを一つずつ消したりして原因を調査したところGoogle タグマネージャーのタグを消すことで正常に動作することが確認できました。
プレビューツールを使い検証したところ、その中でもGA4タグが今回の不具合を引き起こしている原因でした。

colorboxはモーダル上で開く画像URLをaタグのhrefに入れるのですが、aタグをクリックした際にページ遷移を止める動作が何らかの原因で止められているか、止めた後に再度aタグクリックのアクションが行われているようでした。

解決策

hrefの中身を避難させhrefを無くすことで対応できます。
他のプラグインが原因の場合でも使える対応かもしれません。

hrefがなければページ遷移の指定が認識されないのでページ遷移しません。

そしてhref属性がなくなったことでカーソルが変わらなくなるのでcssでcursor: pointerを追加しています。

// hrefの中身をdata-hrefに移しhrefを削除
let colorboxes = document.querySelectorAll('.iframe');
colorboxes.forEach(e=>{
  let href = e.getAttribute('href');

  e.setAttribute('data-href',href);
  e.removeAttribute('href');
})

// ここに本来colorboxのメソッドを繋げていたセレクタを指定
$(".iframe").each(function () {
	// それぞれのモーダルクリック時の対象パスをdata-hrefに入れた値に設定
  let modal_href = $(this).attr("data-href");
	$(this).style(["cursor","pointer"])
  $(this).colorbox({
    href: modal_href,
		// 以下任意のcolorboxの設定
    iframe: true,
    width: "740px",
    height: "700px",
    maxWidth: "90%",
    maxHeight: "90%",
  })
})

colorbox自体、2年以上更新されていないプラグインですが使用率が高いプラグインだと思うのでこの記事が役に立てば幸いです。

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。