Written by Kasumi

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

モーダルウィンドウをプラグインを使わず、CSS、jqueryのみで簡単に再現したい!

このような疑問に回答します!

本記事ではプラグインを使わずに、CSS、jqueryでモーダルを作るやり方について、codepenデモを交えながら解説します。

codepenを使った実装例を紹介

See the Pen モーダルウィンドウ by Kohei (@kouk05) on CodePen.dark

上記がコードペンを使ったモーダルの実装例です。

【ここをクリック】を押すと、モーダルが展開され、背景・閉じるを押すとモーダルを閉じます。

とてもシンプルです。

上記実装例の詳細としては以下になります。

モーダルの内容をhtmlで書く

<span class="modal_open_btn">ここをクリック!!</span>
<div class="modal_contents">
  <div class="modal_conte ents_wrap">
    <!--   モーダルウィンドウの中身ここから   -->
    <p>モーダルウィンドウ</p>
      <span class="modal_close_btn">閉じる</span>
    </div>
  </div>
</div>

まずはモーダルを開く、閉じるボタン(例ではテキスト)、モーダルの中身をhtmlで記述しましょう。

jqueryを使って、モーダル動作を作る

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

モーダルウィンドウを動作させるのにjqueryを使います。上記CDNをhead内等にコピペし、読ませときましょう。(すでに準備されてる方は必要ありません)

$(function() {
  $('.modal_open_btn').on('click', function() {
    $('.modal_contents').fadeIn();
    return false;
  });
  $('.modal_close_btn').on('click', function() {
    $('.modal_contents').fadeOut();
    return false;
  });
    $('.modal_contents_bg').on('click', function() {
    $('.modal_contents').fadeOut();
    return false;
  });
});

上記ソースを、script内にコピペしましょう。

クリック、閉じる、モーダルの背景のセレクタを指定、これらをクリックするとfadein(フェードイン)する、という内容になってます。

後はCSSで装飾するだけ

.modal_open_btn {
  display: inline-block;
  cursor: pointer;
  padding-top: 30px;
}

.modal_contents {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index:100;
  width: 100%;
  height: 100%;
  width: 100%;
}
.modal_contents_bg {
  background: rgba(0,0,0,.8);
  width: 100%;
  height: 100%;
}
.modal_contents_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 50%;
  height: 50%;
  margin: auto;
  transform: translate(-50%,-50%);
  padding: 30px;
}
.modal_close_btn {
  display: inline-block;
  cursor: pointer;
  margin-top: 10px;
}

後はCSSでモーダルを装飾するだけです!上記は参考例です。

以上でシンプルなモーダルウィンドウの完成になります。

まとめ

とてもシンプルなモーダルウィンドウですが、上記方法で実装出来ましたでしょうか?

シンプルなだけに書いてるソースもややこしくないので、自分好みに応用が効くと思います!

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

CSSで背景画像を右からを基準にpx指定する方法

2020.07.13
818
HTMLCSS プログラミング

【簡単CSS】横スクロールできない問題を解決する方法

2022.03.16
783
HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
1417
HTMLCSS

CSSのwhite-space nowrapを子要素だけ解除する方法

2022.08.28
301