colorboxありますよね。
モーダルウィンドウを組込むのに汎用性が高いので、lightbox系ではよく使います。

んで、ページ内のhtmlをモーダル内に表示させたい時、
inlineを使うのですが、なんかうまくいくときとうまく行かない時がある。

何が原因なんだーと思ってずーっと調べてたらスムーススクロールjsとバッティングしてるってことがわかりました。
jquery.smoothScroll.js

ってやつね。

これとcolorboxのinlineを同時に使うと、モーダルが開かない。 


解決策は簡単だった。

<a href="#inline_box" class="inline" data-tor-smoothScroll="noSmooth">クリック</a> 

上記のように、 data-tor-smoothScroll="noSmooth"をつければOK!

完!(ご愛読ありがとうございました!)




なぜこんなことになるんだぜ?

スムーススクロールというのは、ページ内リンクに対して発動させるよね?

<a href="#contents3">コンテンツ3</a>

などとやると、id="contents3"がついているところまでビューンする。


一方colorboxのinlineの指定は以下のような感じ

<a class='inline' href="#inline_content">いでよ!</a>
<div style='display:none'>
<div id="inline_content">
モーダルウィンドウの中身
</div>
</div>

href="#inline_content"の部分がぶつかっちゃうわけですね。
 

なので、 jquery.smoothScroll.jsのほうに用意されてる
スムーススクロールさせない指示 
data-tor-smoothScroll="noSmooth"
をつければ、#inline_contentのほうは、スムーススクロールのほうでは使われずに、colorboxさんが気持ちよく使えるんだ。