簡単にモーダルが作れる!HTMLのdialogタグの使い方を解説

公開日: 2021.09.15
更新日: 2024.01.04
簡単にモーダルが作れる!HTMLのdialogタグの使い方を解説

プログラミングを勉強する過程で、モーダルウィンドウを作りたいと思うことがあるでしょう。

しかし、

「まだHTMLしか勉強していないからモーダルウィンドウを作る自信がない」

「JavaScriptは難しくてよくわからない…」

などと思う方も多いでしょう。

そこで今回は、HTMLのdialogと簡単なJavaScriptでモーダルウィンドウを作る方法を解説します!

今回の記事でわかることは以下の通りです。

  • dialogについての基礎知識
  • dailogを使ったモーダルウィンドウの作り方

JavaScriptを使わずにモーダルウィンドウを作ることは不可能ですが、今回はほとんど決まり文句みたいなものなので、はじめての方でも取り組みやすい内容です。

実際の作り方をステップごとに解説しますので、ぜひ最後まで見てくださいね。

dialogとは?

まずはじめに、今回使用するdialogについて理解しておきましょう。

dialogはHTMLの要素の一つで、操作画面でユーザになんらかの動作を促すために表示されるウインドウのことです。

例えば、画像やボタンをクリックした際に同じWebサイト内で開く小さなウィンドウのこと。

「×」をクリックして小ウィンドウを消したり、ログイン情報を入力するなど、ユーザーも操作できます。

dialogは、必ずJavaScriptとの併用が必要で、以下の2種類があります。

  • モードレスダイアログ:表示中でもモーダルウィンドウ以外の操作ができる
  • モーダルダイアログ:表示中はモーダルウィンドウ以外の操作ができなくなる

なお、dialogはGoole ChromeとOperaにのみに対応しているため、未対応ブラウザーで表示したい時は注意しなければなりません。

HTMLとJavaScriptで実際にdialogのモーダルを作ってみよう

では、実際にdialogを使用してモーダルウィンドウを作ってみましょう!

今回は、一般的なモーダルダイアログのみ解説します。

制作に入る前に、完成品を確認しておきましょう。

「モーダルウィンドウを開く」ボタン

上記は何も操作していない場合の表示画面です。

「モーダルウィンドウを開く」をクリックすると以下のように表示されます。

「モーダルウィンドウを開く」をクリックした後の表示画面

ボタンをクリックしたらモーダルウィンドウが表示されるというシンプルな作りです。

ユーザーが操作できるように、モーダルウィンドウを消せるボタンも設定します。

以下は、制作の流れです。

  1. 環境をセットする
  2. HTMLにdialogタグを書く
  3. JavaScriptにdialogの指定を書く
  4. CSSで位置や背景をカスタマイズする

それぞれの手順ごとに解説していきますので、ぜひ一緒にチャレンジしてみてくださいね。

1.環境をセットする

最初にテキストエディタを開き、HTMLとJavaScriptのファイルを用意します。

ボタンではなく、画像をクリックさせたい場合は好きな画像を用意しても構いません。

すべてのファイルが準備できたら、HTMLの枠組みとなるコードとJavaScriptを外部ファイルとして読み込むための記述をしておきましょう。

<html>
  <head>
<!-- Webサイトのメタ情報などを記述 -->
 </head>

  <body>
 <script src="modal.js"></script>
  </body>

</html>

上記では、「modal.js」というJSファイルを読み込んでいます。

JavaScriptの埋め込みに関してもっと詳しく知りたい方は、以下の記事が参考になります。

【初心者向け】Javascriptを使う方法とは?HTMLへの埋め込みと読み込みをわかりやすく解説

2.HTMLにdialogタグを書く

HTMLにdialogを記述し、dialog内にテキストとボタンを設置します。

この時、モーダルウィンドウを閉じるボタンと開くボタンを一緒に設置しておきましょう。

<body>
    <dialog>
      <!-- モーダルウィンドウ内のテキストの指定 -->
      <p>これはモーダルダイアログのウィンドウ画面です</p>
      <!-- モーダルウィンドウ内を閉じるボタンの指定 -->
      <button id="close">モーダルウィンドウを閉じる</button>
    </dialog>
    <!-- モーダルウィンドウ内を開くボタンの指定 -->
    <button id="open">モーダルウィンドウを開く</button>
  </body>

HTMLの記述はこれだけです。

しかし、このままでは何も動かないのでJavaScriptで動きをつけていきます。

3.JavaScriptにdialogの指定を書く

HTMLのdialogにJavaScripで動きをつけるには、以下のような記述をします。

// Javascript
let dialog = document.querySelector('dialog'); // dialog(モーダルダイアログ)の宣言
let btn_open = document.getElementById('open'); // open(開く)ボタンの宣言
let btn_close = document.getElementById('close'); // close(閉じる)ボタンの宣言
btn_open.addEventListener('click', function() { 
  // 開くボタンをクリックした場合の処理
  dialog.showModal();
}, false);
btn_close.addEventListener('click', function() {
  // 閉じるボタンをクリックした場合の処理
  dialog.close();
}, false);

まだHTMLしか勉強していない方やJavaScriptが苦手な方にとっては、難しいと感じるかもしれません。

しかし、dialogで使用するJavaScripはほとんど決まり文句のようなものなので、このままコピペしてしまいましょう!

今回は、開くボタンを押してモーダルウィンドウを開く、閉じるボタンを押してモーダルウィンドウを閉じるといった単純な動作のみになっています。

HTMLのdialogを使えば意外と簡単にモーダルが作れる

今回は、HTMLのdialogについて解説しました。

用語についての知識だけでなく、実際にコードを真似して書いてみることで、よりdialogの仕組みや使い方について理解できますよ。

モーダルウィンドウは、画像の表示やログイン画面など、意外と私たちの身近な場面で使用されています。

dialogを使えば簡単にモーダルウィンドウが作れるので、HTMLの勉強やWebサイト制作などに活用してみてくださいね。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5