素のJavaScript(jQueryなし)でモーダルウインドウを実装する方法をご紹介します。

簡単なので、このぐらいのもののためにjQueryに依存するのはやめた方が良いです。jQueryの利用有無でLighthouseのパフォーマンス点数が10点ぐらい違うという報告も見ています。ホームページレベルでjQueryに頼りたくなるものと言えば、私はアコーディオンメニューぐらいかなと思っていますが、アコーディオンメニューもjQueryなしで実装する方法をご紹介していますので、そちらもよろしければご参照ください。

なお、何も見ずに自分の考えだけで作ってるので、よく見かけるようなコーディングと違う部分はあるかもしれません。

素のJavaScriptでモーダルウインドウを実装する(jQueryなし)

仕様

以下の仕様とします。

  1. モーダルウインドウが表示されている間はその背景となる元々表示されていた画面はスクロールさせない
  2. モーダルウインドウ内のスクロールは許容する
  3. モーダルウインドウを開く際と、閉じる際のアニメーションも実装
  4. 「×」ボタン押下だけでなく、Escキーでもモーダルウインドウを閉じることができる

実装デモ

次のボタンを押すとモーダルウインドウが開きます。これがこの後ご紹介するコーディングの実装結果です。

コード

HTML

<div class="modal-btn-wrapper">
   <button id="modal-btn" class="modal demo">モーダルウインドウを開く</button>
</div>
<div id="modal-overlay">
   <div class="modal-window">
      <button id="close" aria-label="閉じる"></button>
      <h2>モーダルウインドウ</h2>
      <p>省略</p>
   </div>
</div>

CSS

#modal-overlay{
   visibility: hidden;
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0,0,0,.7);
   z-index: 999;
  transition: .3s;
  opacity:0;
}
#modal-overlay.active{
   visibility: visible;
   transition: .3s;
   opacity: 1;
}
.modal-window{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   background-color: #fff;
   width: 80%;
   max-width: 900px;
   height: 500px;
   margin: 0;
   padding: 30px;
   overflow-y: auto;
}
#close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
}
#close::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 25px;
   height: 1px;
   background-color: #000;
   transform: translate(-50%, -50%) rotate(45deg);
}
#close::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 25px;
   height: 1px;
   background-color: #000;
   transform: translate(-50%, -50%) rotate(-45deg);
}
body.overflow-hidden {
    overflow-y: hidden; /*背景を固定*/
}

JavaScript

const modal_btn = document.getElementById('modal-btn');
const modal = document.getElementById('modal-overlay');
const closeBtn = document.getElementById('close')

modal_btn.addEventListener('click', function() {
   modal.classList.add('active');
   document.querySelector('body').classList.add('overflow-hidden'); //body要素にクラスを与える
   closeBtn.addEventListener('click', function() {
      modal.classList.remove('active');
      document.querySelector('body').classList.remove('overflow-hidden'); 
   }, false);
   document.addEventListener('keydown', keydown_ivent);
   function keydown_ivent(e) {
      if(e.key == 'Escape'){
         modal.classList.remove('active');
         document.querySelector('body').classList.remove('overflow-hidden');
      }
   }
}, false);

解説

CSSは分かりやすくするため、本ページのデモにおける見た目の調整のための部分は省略している箇所があります。モーダルウインドウとしての機能的に意味があるところだけ掲載しています。

ボタン押下で#modal-overlaydiv要素に.activeのクラス名を追加する、ということをJavaScriptでやっています(JavaScriptの6行目)。それにより、ボタンを押す前はvisibility: hiddenで、ボタンを押すとvisibility: visibleに変わるようにしています。ここはdisplay: noneだとアニメーションが効きません。transitionプロパティでopacity:0からopacity:1への変化をつけています。

ポイントは、モーダルが開いた時のスクロールの挙動で、モーダルウインドウは、overflow-y: autoでスクロールされるようにし、モーダルウインドウの背景は、モーダルが開いているときだけbody要素をoverflow-y: hiddenでスクロールしないようにしています。ここは気を付けないと、タブレットやスマホでの操作に支障があります。

JavaScriptと言っても、ここまででJavaScriptでやっているのは、class名の追加削除のみで、あとはCSSなんですよね。

JavaScriptの12~18行目がEscキーを押下してモーダルを閉じる挙動の実装です。
「×」ボタン押下でも閉じられるので、ここはアクセシビリティ上も必須というわけではないですが、要望としていただいたことがあります。私はそういう習慣がないですが、Escキーでモーダルを閉じる、というのが癖づいている人にとっては、Enterキーでボタンが押せないなどと同じくらい困るのだろうとは思いますので、この部分もご紹介しました。

注意点

ここまでご説明しておいてなんなんですが、visibility: hiddenは表示しない状態なので、Googleもそう解釈します。つまり、モーダルウインドウ内に書かれた文言は、そのページ内において存在しないものとして扱われる可能性が高いということはSEOのことを考えた時に注意が必要です。

昔は、display: nonevisibility: hiddenで検索ワードを散りばめる、いわゆる隠しテキストと呼ばれるような手法がSEOのために使われたことがあり、それに対抗するため当時は少なくとも、visibility: hiddenをあえてGoogleが解釈しないようにしていたことがあるはずなのです。今は検索エンジンの精度が上がっているので、モーダルウインドウだということまで解釈して扱っている可能性もありえますが、表示されてないものだということはGoogleが理解して扱うのだということは頭に入れて、モーダルウインドウを活用すべきと言えます。つまり、SEOを考えた時に、モーダルウインドウ内に書こうとしている内容が重要であるならば、それはモーダルウインドウにするべきではないということです。

まとめ

モーダルウインドウをjQueryなしで実装する方法とSEOを考えたうえでの注意点をご紹介しました。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。