トピックス

  1. HOME
  2. トピックス
  3. WEBコーディング
  4. 画面中央にくるイイ感じのモーダルウィンドウの見た目の作り方(プラグインなし)

画面中央にくるイイ感じのモーダルウィンドウの見た目の作り方(プラグインなし)

Lightbox系のプラグインを使うまでもないちょっとしたモーダルウィンドウを作りたい時はありますよね。そんな時にお手軽に作れて画面中央にも来て、なおかつレスポンシブにも対応しているものを作りたいと思います。

サンプル

下記のサンプルを開くボタンを押すとモーダルウィンドウが開きます。

サンプルを開く

 
モーダルウィンドウのサンプル

サンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいります

サンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいりますサンプルテキストはいります

閉じる

HTML

<div id="sampleModal" class="samplemodal">
    <div class="samplemodal-wrap">
        <div class="samplemodal-bg"></div>
        <div class="samplemodal-box">
            <div class="inner">
                内容はいります
                <div class="samplemodal-close"><span>閉じる</span></div>
            </div>
        </div>
    </div>
</div>

これがサンプルのhtmlです。実際にお使いになる際はお好きに変更していろいろ試してください。

CSS

html.modalset {
  overflow: hidden;
}
.samplemodal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.samplemodal-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  white-space: nowrap;
}
.samplemodal-wrap::-webkit-scrollbar {
  display: none;
}
.samplemodal-wrap:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 100%;
}
.samplemodal-bg {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(51, 51, 51, 0.8);
  width: 100%;
  height: 100%;
}
.samplemodal-box {
  width: 100%;
  max-width: 900px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.samplemodal-box .inner {
  background: #fff;
  padding: 80px 20px;
  text-align: left;
}
.samplemodal-box .inner > :first-child {
  margin-top: 0;
}
.samplemodal-box .samplemodal-close {
 ここは自由
}

これがサンプルのcssです。実際にお使いになる際はお好きに変更していろいろ試してください。

jQuery

$(function() {
 $('.samplemodal-open').click(function(){
  $('#sampleModal').fadeIn();
  $('html').addClass('modalset');
 });
 $('.samplemodal .samplemodal-bg,.samplemodal .samplemodal-close').click(function(){
  $('#sampleModal').fadeOut();
  $('html').removeClass('modalset');
 });
});	

これがサンプルのjQueryです。1個のモーダルウィンドウを開く時のやり方ですので、1ページ内でいくつも追加したいというときには書き方が変わりますが、今回は1ページ1個の想定で記載しています。

今回のポイント

今回のモーダルウィンドウを作るためにはポイントがあります。

画面中央寄せのポイント

上記で記載しているcssの重要なポイント部分を下記に抜粋しました。

.samplemodal-wrap {
 overflow: auto; //中身が画面よりはみ出た時はスクロールを有効化
  white-space: nowrap; //自動改行しないようにしてくれます。
}
.samplemodal-wrap:after {
  content: '';
  display: inline-block; //blockでもinlineでもなくinline-blockが重要
  vertical-align: middle; //縦方向中央寄せにするのに必要
  width: 0px; //モーダルウィンドウを横方向に中央寄せにするために見た目に影響を与えないように0px
  height: 100%; //画面幅いっぱいの高さが必要
}
.samplemodal-box {
  width: 100%;
  max-width: 900px; //画面を可変した際に自動でリサイズされるように
  display: inline-block; //blockでもinlineでもなくinline-blockが重要
  vertical-align: middle; //縦方向中央寄せにするのに必要
}
.samplemodal-box .inner {
  white-space: normal;//ここの中身は自動改行を有効にする
}
.samplemodal-box .inner > :first-child {
  margin-top: 0;
}

「.samplemodal-wrap:after」で疑似要素を追加して、「.samplemodal-box」と合わせて「display:inline-block;」で横並びにします。ただし、このままだと画面を縮めていくと「.samplemodal-wrap:after」の疑似要素が改行され下に落ちてしまいます。

そこで「.samplemodal-wrap」に「white-space: nowrap;」を指定することで「.samplemodal-wrap:after」が下に落ちないようにします。

「.samplemodal-wrap:after」自体は画面幅いっぱいに高さを持っているので、「.samplemodal-box」は高さが小さくでも「vertical-align: middle;」がついていることにより縦方向に中央寄せになります。この指定が利くようにするために「display:inline-block;」が必要になるのがポイントです。

パソコンで見ている時は縦方向中央寄せに、スマホのような小さい画面で見たときは中身が多くて画面内に収まらないときは縦にスクロールになります。そのためにはhtmlやbodyなどに「overflow: hidden;」を付けてあげるのを忘れないようにしましょう。今回はモーダルゥインドウが開くと、htmlタグに「.modalset」をつけて背景がスクロールしないように設定しています。

おまけ

自分でモーダルウィンドウを作成すると閉じるボタンだけでなく、モーダルウィンドウの外側を押すと閉じるようにしておいてあげるのがユーザーにとって親切です。プラグインの場合はだいたいこの設定はされていますので、自分でも設定しておきましょう。

今回は「.samplemodal-bg」という要素を背景として追加しています。なので、閉じるボタンと、この背景をクリックした際に閉じるという設定にするのがポイントです。その記述が下記になります。

$(function() {
    $('.samplemodal .samplemodal-bg,.samplemodal .samplemodal-close').click(function(){
        $('#sampleModal').fadeOut();
        $('html').removeClass('modalset');
    });
});	

「 $(‘.samplemodal .samplemodal-bg,.samplemodal .samplemodal-close’)」で複数個所を選択することで実現できます。

それでも自分で実装するの難しいが場合は…

無理せずプラグインを使ってしまいましょう!最近おすすめのプラグインは下記です。

REMODAL

https://vodkabears.github.io/remodal/

少しだけ癖がありますが、レスポンシブ対応でモーダルウィンドウを実装できます。開いた時、閉じた時に別のスクリプトも動かせるオプションも用意されているのでいろいろしたい際には便利です。

Lightcase.js

https://cornel.bopp-art.com/lightcase/

いろいろなものをモダールウィンドウで表示できるLightbox系プラグインです。グループ化なども簡単にできるのでギャラリー表示などにもおすすめです。

以前にも使い方を簡単にご紹介していますのでよろしければご参考ください。

レスポンシブ対応のオシャレなLightboxプラグイン「Lightcase.js」

まとめ

モーダルウィンドウの作り方はいろいろあります。でも意外と中央寄せが微妙だったり、スマホで見た時に縦方向のスクロールがうまくいかないなどなど、問題点もあったりします。実装して初めて気づくこともあると思いますので、もし見た目でつまずいたときは上記のやり方を参考にしてみてください。

この記事をシェアする

おすすめ記事