トピックス

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

ALL WEBサイト全般WEBデザインWEBコーディングWEBマーケティングWEBサーバーニュース

カテゴリーを選択

2020.05.29

WEBコーディング

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

※ 本記事は広告を利用しています

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’)」で複数個所を選択することで実現できます。