想いのはしりがき

Webサイトを制作していると、毎日のように壁に当たります。

そしてその壁を乗り越えた時、何とも言えない達成感もあり。

今後の参考のためにも、書き残しておきます。

今回の壁はモーダルウィンドウを開いた時に親ページがページのトップへ戻ってしまう現象。

これまでも、いろんなモーダルウィンドウを使ってきましたが、10年以上も前に「Lightbox」を使用した際に同じ現象でさんざん悩みました。

そのサイトでは、画像クリックをトリガーとしてその拡大表示をLightboxで行っていました。

しかし、デフォルト設定のままではマウスオーバーしてもカーソルが変化しないので、その画像がクリッカブルかどうかがそもそもわかりません。

そこで、カーソルが指に変わるように「a href=”#”」を入れてみたところ、カーソルの問題は解決しても、親ページがページのトップへ戻ってしまう別の問題が発生。トリガーがページ上部にあるならまだ違和感も少ないでしょうが、そのサイトでは多くの場合、トリガーとなる画像、つまり拡大表示で見せたいものがページの後半にありました。

そこで色々ググった結果、そのサイトでは「a href=”javascript:void(0)”」でこの問題をクリアすることができました。

ところが今回は状況がもう少し複雑。PC表示でモーダルウィンドウを開く分には親ページはトップへ戻されないのに、スマホでは親ページがトップへ戻されてしまう。もちろん、上記の「a href=”javascript:void(0)”」も試しましたが効果無し。

ググりまくって答えを探すと、今回使用したものとは別のjQueryプラグインでの対応でしたが、「body: height=”100%”;」に問題があるようで、CSSファイルから「body: height=”100%”;」をコメントアウトしてアップし直したところ、見事に解決！

ただ、釈然としないのは、何故「body: height=”100%”;」が問題なのか、の根本理由が理解できていないところです。数日経ったらこの問題をもう一度考えてみます。一度時間をおいて再考するとすんなり解答が見つかるってこと、結構ありますので。