colorboxありますよね。
モーダルウィンドウを組込むのに汎用性が高いので、lightbox系ではよく使います。
んで、ページ内のhtmlをモーダル内に表示させたい時、
inlineを使うのですが、なんかうまくいくときとうまく行かない時がある。
何が原因なんだーと思ってずーっと調べてたらスムーススクロールjsとバッティングしてるってことがわかりました。
jquery.smoothScroll.js
ってやつね。
これとcolorboxのinlineを同時に使うと、モーダルが開かない。
解決策は簡単だった。
上記のように、 data-tor-smoothScroll="noSmooth"をつければOK!
完!(ご愛読ありがとうございました!)
なぜこんなことになるんだぜ?
スムーススクロールというのは、ページ内リンクに対して発動させるよね?
などとやると、id="contents3"がついているところまでビューンする。
一方colorboxのinlineの指定は以下のような感じ
href="#inline_content"の部分がぶつかっちゃうわけですね。
なので、 jquery.smoothScroll.jsのほうに用意されてる
スムーススクロールさせない指示
data-tor-smoothScroll="noSmooth"
をつければ、#inline_contentのほうは、スムーススクロールのほうでは使われずに、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さんが気持ちよく使えるんだ。