colorboxで、急に「inline」が効かなくなった?

クライアントからの指摘で、colorboxで出していたモーダルが出なくなっていることに気づきました。
「このリンク? なんでしたっけ? どこにも飛びませんけど?」と。

あわてて見てみたけれども、ファイルの更新はしていないし。Safari、Chromeのツール類を使ってもエラーらしいエラーはでていない。
さっぱり見当がつかない…と途方に暮れていましたら。

どうやら、ページ内リンクの「#」とコンフリクトしていたようです!

拾いものの固定メニューのスクリプトを使っているのですが。
colorboxのクラスである「inline」を除く、と指定(『:not(.inline)』を追加)してやればよいようです。

// ページ内リンク
if (window.matchMedia( '(max-width: 767px)' ).matches) { //スマホ
	var headerHight = 50;
} else {   //PC
	var headerHight = 150;
}
$('a[href^=#]:not(.inline)').click(function(){
	var href= $(this).attr("href");
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top - headerHight; 
	$("html, body").animate({scrollTop:position}, 550, "swing");
	return false;
});

これで動くようになりました。
よかったよかった。

別件もあり、解決できないまま1週間ほど放置されてしまっていたので、すごくスッキリです。

コメント

タイトルとURLをコピーしました