ラック
Home > ブログ > 記事 > 2018年9月 > Bootstrap3.3.7のモーダルを閉じるとアンカーリンクから引き戻される

Bootstrap3.3.7のモーダルを閉じるとアンカーリンクから引き戻される

カテゴリ: ホームページ,プログラム

モーダル内のアンカーリンクを押す前に言っておくッ!おれは今Bootstrapのモーダルをほんのちょっぴりだが体験した

い…いや…体験したというよりはまったく理解を超えていたのだが……

あ…ありのまま今起こった事を話すぜ!

おれはモーダルウインドウのアンカーリンクを押してアンカー先へジャンプしたと思ったらいつのまにかモーダルウインドウを開くボタンの位置までスクロールを戻されていた

な…何を言っているのかわからねーと思うが

おれも何をされたのかわからなかった…

頭がどうにかなりそうだった…イベントトリガーの誤発火だとかスクロールバーのアジャストだとか

そんなチャチなもんじゃあ断じてねえ

もっと恐ろしいものの片鱗を味わったぜ…

はい、『ジョジョの奇妙な冒険』第三部のポルナレフの有名なセリフをもじりましたが、大体そんな感じです。

Bootstrap3.3.7で下記の操作を行います。

  1. モーダルウインドウを開く
  2. モーダルウインドウ内のアンカーリンクをクリックする(この時点ではアンカーリンク先にジャンプする) 3.モーダルウインドウを閉じる

すると、2.でアンカーリンク先に確かにジャンプしていたはずなのですが、モーダルウインドウを閉じると同時に、モーダルウインドウを開くトリガーになったボタンの辺りまでスクロールが戻ってしまうのです。

モーダルを開いた場所に戻るというのは通常であれば親切設計なのだと思うのですが、アンカーリンクをモーダルウインドウ内に設置したい、という条件に当たりまして。その場合、「折角アンカーリンク先に移動しても戻される」とかえって不要なお節介な状態になってしまいました。

実際のデモを下記リンクに用意しましたので、体験して頂ければと思います。

さて、今回はこれでは困るということでどうにかできないかと調べた結果、

  1. Bootstrapのmodal.jsの中で、モーダルウインドウを閉じたときに呼ばれる関数を特定
  2. 上記関数の中身を一度全部コメントにして問題が発生しなくなることを確認(別の問題が発生しますが、致命的ではないのでとりあえず置いておきます)
  3. 一つずつ戻してどれが原因か確認
  4. 3.の結果、最後のイベントトリガー発火の部分が怪しいのでトリガーに登録されている名前でコード内を検索
  5. 検索に引っかかった部分の中で、怪しいコードを探す
  6. 今回の場合、フォーカスを当てる$this.trigger('focus')の部分が怪しいと特定したのでそこをコメントに
  7. ビンゴ

という感じでした。ライブラリのコードに直接手を入れるのは宜しくないのですが、今回は急ぎで時間も掛けていられないし、一時的なものだったのでこれでひとまず対処しました。

なお、対処済みのコードではきちんと上記現象が発生しなくなることを同じくデモを作成しました。

検索してもヒットしなかったので、困っている方はあまりいらっしゃらないのでしょうか?特殊ケースでしょうし、いらっしゃらないんでしょうねぇ……。

タグ: javascript,jQuery,bootstrap

 



関連する記事一覧