WEBサイトを作成しているとページを表示したい時や特定の要素をクリックした際、ポップアップで内容を表示することがよくあります。ポップアップを実装するためのプラグインは様々ありますが、仕様に合わせて適切なポップアッププラグインを探さないといけません。

しかしポップアップ画面を自分で作成することが出来れば、仕様にぴったり合致するプラグインを探さなくても大丈夫です。しかもポップアップ表示の仕組みは非常に簡単に実装できるので出来れば仕組みを理解し、いつでも自作出来るようにしておきたい内容になります。

今回の記事ではポップアップ表示を自作する方法を解説したいと思います。

自作ポップアップのサンプルコード

まずはポップアップを実装するためのサンプルコードを確認してみましょう。jQueryを読み込んで以下コピペするだけで実装出来ます。

<div class="open">表示</div>
<div class="popup">
  <div class="popup__inner">
    <div class="popup__title">ポップアップタイトル</div>
    <div class="popup__body">ポップアップの内容が入ります。<br>ポップアップの内容が入ります。</div>
    <div class="close">×</div>
  </div>
</div>

.open{
  padding: 8px 50px;
  border-radius: 5px;
  display: inline-block;
  background: #dc5a45;
  color: #fff;
}
.popup{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
}
.popup.view{
  display: flex;
}
.popup__inner{
  display: inline-block;
  background: #fff;
  padding: 50px;
  box-shadow: 0 0 5px rgba(0,0,0,.25);
  position: relative;
}
.popup__title{
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}
.close{
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #dc5a45;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close:hover{
  opacity: .6;
}

$(function(){
  $(".open").on('click',function(){
    $(".popup").addClass('view');
  });
  $(".close").on('click',function(){
    $(".popup").removeClass('view');
  });
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

ポップアップを作成するには以下を作る必要があります。

• HTMLとCSSでボタンとポップアップ後のレイアウトを作成する
• 開くボタンを押したとき、ポップアップを表示する処理を作る
• 閉じるボタンを押したとき、ポップアップを非表示にする処理を作る

この中でjQueryが必要になるのは「開くボタンを押したときにポップアップを表示する」と「閉じるボタンを押したときにポップアップを非表示にする」のみです。
それ以外はHTMLとCSSで配置してあります。

HTML、CSSの解説

ポップアップ実装をするために必要なHTMLは大きく分けて二つの要素から構成されています。

• 開くボタン
• ポップアップ表示する要素

開くボタンをHTML、CSSで作成することに関しては特に注意する点は無いので、このうち「ポップアップ表示する要素」について解説していきたいと思います。

<div class="popup">
  <div class="popup__inner">
    <div class="popup__title">ポップアップタイトル</div>
    <div class="popup__body">ポップアップの内容が入ります。<br>ポップアップの内容が入ります。</div>
    <div class="close">×</div>
  </div>
</div>

ポップアップ表示する要素は大きく分けて以下の二つの要素から構成されています。

• 画面全体を覆う薄暗い膜
• ポップアップの内容を表示する要素

上記ソースの中で「画面全体を覆う薄暗い膜」は<div class="popup"></div>にあたります。「ポップアップの内容を表示する要素」が<div class="popup__inner"></div>になります。

.popup{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}

ポップアップの薄暗い膜は上記CSSで作成できます。上記指定で画面全面を薄暗い膜で覆うことが出来ます。

続いてポップアップの内容を表示する要素を作成します。この<div class="popup__inner"></div> 自体はどのような指定でも大丈夫です。適宜デザインに合わせてHTMLとCSSを指定していきます。

この時この要素を画面の上下左右中央に配置したいので、<div class="popup"></div> に対して以下のようなCSSを追記します。

.popup{
  display: flex;
  align-items: center;
  justify-content: center;
}

ここまでHTMLとCSSを作成出来たらポップアップを非表示にしてあげます。非表示にするために.popupに指定したdisplay: flex;をdisplay: none;に変更します。

.popup.view{
  display: flex;
}

上記のようにCSSを用意することで.popupに.viewを付けたらポップアップ要素が表示されます。この.viewの付け外しをjQueryを使って操作していきます。

jQueryの解説

$(function(){
  $(".open").on('click',function(){
    $(".popup").addClass('view');
  });
  $(".close").on('click',function(){
    $(".popup").removeClass('view');
  });
});

jQueryでHTMLタグにクラスを追加削除するためには以下のメソッドを使うことで実現できます。

jQueryメソッド	内容
addClass()	CSSクラスを追加
removeClass()	CSSクラスを削除

$(".open").on('click',function(){
  $(".popup").addClass('view');
});

開くボタンを押したとき、.popupに.viewを追加します。こうすることで開くボタンを押したとき、ポップアップ要素が表示されます。

$(".close").on('click',function(){
  $(".popup").removeClass('view');
});

逆に閉じるボタンを押したとき、.popupについている.viewを削除します。こうすることで閉じるボタンを押したとき、ポップアップ要素が非表示になります。

以上で基本的なポップアップ機能の実装が完成です。