LOADING...
2021.02.26
この記事は約2分で読めます。
最近お仕事で、近頃メジャー使いになったコンテンツがフェードインするタイプのサイトを制作しておりました。そしてポップアップを同時にということでモーダルウインドウで頻繁に使っていたColorboxを併用したのです。パソコン、Androidはいいのですが、ダメだったのがiPhone、iPad。モーダルの際に指定した背景色のせいかもしれませんが、モーダルウインドウ内に文字が現れない…。z-index触ってもダメでした。
ググるとiPhoneで挙動しないとかはあるんですが、どうにも内容が異なり…さらにググるとスムーススクロールと干渉する場合があるみたいで、そのページにはスムーススクロールを削除したとあったのですが、今回はそんなわけにはいかない!ということでいくつかテストしたところ、私の場合はスムーススクロールではなくてコンテンツがスクロールによってフェードインするjsが干渉することが分かりました。
CSSでコンテンツをフェードインする手もあるのですが、動作上それでは意図した動きにならないので今回はパス。使ったのは違うタイプのモーダルウインドウです。
使わせていただいたのはcoding-laboのサンプル。
http://coding-labo.asia/javascript/modal-3/
コンテンツフェードインは
$(function () { $(window).on('load scroll', function () { $('.hoge').each(function () { var target = $(this).offset().top; var scroll = $(window).scrollTop(); var height = $(window).height(); if (scroll > target - height) { $(this).addClass('active'); } }); }); });
こういうのを使用しました。実際の動きは他の方のリンクを付けておきます。
https://codepen.io/recooord/pen/vbgdOx
この組み合わせでCSSを自分のサイト環境に合わせてカスタマイズしたら、ちゃんと表示されました。
テストしていないけれど下記もなかなか良さそうな感じ。
https://spyweb.media/2017/09/21/modal-window-fixed-background-also-support-ios/
そんなわけで備忘録としてメモしておきます。
コメントをどうぞ