趣味さがしログ。

無趣味の人間が趣味を探す記録

iziModal.jsとAOSを使うと、AOSの表示がおかしくなった話

コーディングの依頼で、「iziModal.js」と「AOS」のプラグインの指定があったので、どちらもそのままコピペでぶっこんだらうまく動かなくて、なんとか解決したので書いておこうとおもう。

普通に書いたらどうなるのか

iziModalは、モーダルウインドウが手軽に使えるプラグイン


AOSは、画面をスクロールすると要素がふわっと表示されるプラグイン


Jqueryも英語も苦手なので、最初日本語で解説してくださっているサイト様からコピペしてクラス名などを変えて書いた。

こんな感じ

izimodal

【HTML】

<div id="modal">モーダルウインドウの中身</div> 
<a href="https://github.com/dolce/iziModal" class="open-modal">ウインドウOPEN</a>

【JS】

 $(document).on('click', '.open-modal', function(event) {
      event.preventDefault();
      $('#modal').iziModal('open');
    });

AOS

AOSは諸々読み込んだ状態で、フェードインさせたい要素に「data-aos=fade-up」など、使いたいエフェクトの属性を与えるだけ。


これで完璧!と思ったら、izimodalを仕込んだ場所より下に書いてあった、フェードインさせたい要素がフェードインされない。

izimodalより前のは動くのに。

解決方法

まずは何が原因かを調べるために、他にも書いているプラグインを一つずつコメントアウトして検証することをやってみた。

それでどうやらizimodalがあるとうまく動かないことがわかったけど、何が原因なのかはさっぱりわからず。

aosはwindowの高さや要素の座標を取得したりして動いている気がするので、izimodalのモーダルウインドウ部分が実際のコードと違う場所に移動することで座標がおかしくなるのかな?と勝手な想像をしてみるも、解決の仕方までたどり着かない。

さんざん調べまくって、「待てよ?izimodalより後ろが動かんってことは、izimodalを一番後ろに書けばいんじゃないの?」ということにやっと気づいた。

そこで、izimodalの、モーダルウィンドウの部分だけを一番最後に書いた。

コンテンツ

<a href="https://github.com/dolce/iziModal" class="open-modal">ウインドウOPEN</a>

コンテンツ

・
・
・
・
<div id="modal">モーダルウインドウの中身</div> 

これだけであっさり解決。

調べても出てこないのは、誰もこんなことにつまづかへんからやと思うけど、
もしかしたら同じことで悩んでる人がいるかも知れないので、一応記事にしてみました。