Modaal.jsでモーダルウィンドウを出したときに背景がずれる


シンプルなモーダルウィンドウ用プラグイン「Modaal.js」

まずは使い方から

Modaal ダウンロードページ

GitHub - humaan/Modaal: An accessible dialog window library for all humans.
An accessible dialog window library for all humans. - humaan/Modaal
github.com

緑色の「Code」ボタンからzipファイルをダウンロード

使用するのは
dist/css/modaal.min.css　と
dist/js/modaal.min.js の２つ
jQuery本体と合わせて　パスを記述します

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<link rel="stylesheet" href="css/modaal.min.css">
<script src="js/modaal.min.js" type="text/javascript"></script>

※↑これはそれぞれcss、jsファイルを作成してそこに入れた場合

そしてモーダルウィンドウとして表示させるものと
ボタンになるものを用意

// ↓ ボタン
<a href="#text" class="button">ボタンを押してください</a>

// ↓ モーダルウィンドウ
<div id="text" style="display: none;">
	このように、モーダルウィンドウが表示されます
</div>

実行のためのコードを記載

<script type="text/javascript">
    $(".button").modaal({
    content_source: '#text'
});
</script>
  • ボタンとなるものにモーダルウインドウへのページ内リンクを設定し、さらに
    classを設置する
  • モーダルウィンドウはdisplay:noneを使って消しておく

という形にすればOK

DEMO

このような感じでとてもシンプルに、レスポンシブなモーダルウィンドウを設置できるのですが、一つ気になったことが

クリックしたときに背景が動く問題

モーダルウィンドウがブラウザの縦の長さをはみ出るときは
もちろんスクロールで下まで見る事ができるのですが
そうするとボタンをクリックするときに
全体が横にずれるように動いてしまうのです

たぶんなのですが
モーダルウィンドウにスクロールバーが出る時は、
ブラウザのスクロールバーが出ないように
overflow:hiddenが
bodyに設定されるようになっており
そのせいでページ全体がスクロールバーの分横に広がるので
動いたように見えてしまうということなのでしょうか…語彙力…

そこで設置した
modaal.min.cssの一番最初にある

.modaal-noscroll{overflow:hidden}

をコメントアウトすると
クリックしても動かなくなりました
そのかわり、モーダルウィンドウのスクロールバーと
ブラウザのスクロールバーが２つ並ぶので綺麗ではありません

どちらが良いのか？
ひとまず私は動くのが気になったので
スクロールバーを出す方向で設置しました

しかしもっと良い解決法があるような気も…


コメント