tips blog

【jQuery】Slickとmodaalの相性が悪い

2020年4月3日

Slick(ver 1.6.0)とmodaal(ver 0.4.4)の相性が悪かったのでメモ。

Slickのスライダー内のコンテンツのボタンにモーダルウィンドウを開くボタンを付けたいとクライアントからの要望で、使い勝手の良いmodaal(ver 0.4.4)を入れた。
(ver 0.x.xを実用するなという声は少し置かせて頂いて)
テストプレビューで確認すると時々Slickのコンテンツがズレてる現象を確認。

色々動作を確認すると、モーダルウィンドウを開くボタンをマウス押しながら(マウスダウン)少しスライドした状態で、マウスを離す(マウスアップ)とモーダルウィンドウが開き、
モーダルウィンドウを閉じると!Slickのスライダーがズレる!という事を確認。

あーだこーだと、原因追及した結果。
modaalの閉じる機能に以下のコードがあり、これをコメントアウトすると正常になる事を確認。

// Roll back to last focus state before modal open. If was closed programmatically, this might not be set
if (self.lastFocus != null) {
self.lastFocus.focus();
}

モーダルを開く前にフォーカスされてた箇所に、閉じるときに戻す機能のようで、それが原因でズレてたみたい。
Slickのコンテンツにフォーカスが移動したら、なぜズレるの?
Slickに問題あるくない?と思ったが、フォーカスを戻す必要も無いので、一旦調査完了。
上記コードをコメントアウトで解決させた。

// Roll back to last focus state before modal open. If was closed programmatically, this might not be set
//if (self.lastFocus != null) {
//self.lastFocus.focus();
//}

【まとめ】

■現象
・Slickでコンテンツがずれる。
・Slickでコンテンツが途中で止まる。
・Slickをスライドさせた状態で、modaalを開くとモーダルウィンドウを閉じたときに、コンテンツがずれる。

■状態
・Slick(ver 1.6.0)とmodaal(ver 0.4.4)を使用。
・Slickのコンテンツ内にmodaalのボタンがある。

■解決
modaal.jsの1001-1003行目をコメントアウト

// Roll back to last focus state before modal open. If was closed programmatically, this might not be set
//if (self.lastFocus != null) {
//self.lastFocus.focus();
//}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です