基本のモーダルウインドウを作る方法
基本モーダルウインドウを作る方法を紹介します。モーダルウインドウは、ボタンをクリックしたときに画面中央へ情報を表示できる定番UIです。確認画面やお知らせ、簡単なメッセージ表示など、さまざまなWebサイトで利用されています。本記事では、HTML・CSS・JavaScriptだけを使い、モーダルを開いて閉じる基本的な動作を実装します。
サンプルコードでは、「モーダルを開く」ボタンをクリックするとモーダルウインドウが表示され、「閉じる」ボタンをクリックするとモーダルが閉じます。背景クリックやESCキーで閉じるなどの機能はあえて実装せず、基本的な構成だけに絞っているため、初心者でもコードの流れを理解しやすく、必要な機能を追加しながらカスタマイズできます。
お問い合わせ画面や管理画面、会員サイト、ECサイトなどでメッセージや確認画面を表示したい場合のベースとして利用できます。ボタンの文字やモーダル内のタイトル・説明文はHTMLで変更でき、色やサイズ、余白などのデザインはCSSから自由に調整できます。シンプルな構成なので、そのまま利用するだけでなく、自分のWebサイトに合わせたモーダルウインドウへ発展させたい場合にもおすすめです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
シンプルな構成で実装できる、基本的なモーダルウインドウの動作を確認できます。
「モーダルを開く」をクリックするとモーダルが表示されます。「閉じる」をクリックするとモーダルを閉じる動作を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>基本モーダルウインドウ</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモ全体 -->
<div class="basic-modal-window_wrap">
<!-- タイトル -->
<h1 class="basic-modal-window_title">
基本モーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="basic-modal-window_text">
ボタンをクリックするとモーダルウインドウを表示します。
</p>
<!-- モーダルを開くボタン -->
<button
class="basic-modal-window_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="basic-modal-window_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="basic-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="basic-modal-window_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="basic-modal-window_modal-text">
これは基本的なモーダルウインドウです。閉じるボタンをクリックするとモーダルを閉じることができます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="basic-modal-window_close"
type="button"
data-modal-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルウインドウの構造を作成し、CSSでは画面中央へ表示するモーダルや背景のデザインを設定します。JavaScriptではボタンをクリックしたときにモーダルを表示し、閉じるボタンをクリックすると非表示へ戻す処理を行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはページ全体を構成するファイルです。タイトル、説明文、モーダル内のタイトルや本文、ボタンの文字などを変更できます。
style.cssはデモ全体とモーダルの見た目を設定するファイルです。背景色、ボタンの色、余白、角丸、モーダルの横幅、背景の暗さなどを自由に調整できます。
script.jsはモーダルの開閉処理を担当するファイルです。開くボタンをクリックするとモーダルを表示し、閉じるボタンをクリックするとモーダルを非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」ボタンをクリックするとモーダルウインドウが表示され、「閉じる」ボタンをクリックするとモーダルが閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、モーダル内のタイトルや本文を変更できます。案内画面、確認画面、お知らせなど用途に合わせて表示内容を変更できます。
style.cssではデモ全体の横幅、背景色、余白、ボタンの色、文字サイズ、モーダルの横幅、背景の暗さ、角丸、影などを変更できます。デザインを変更してサイトの雰囲気へ合わせることもできます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
デモ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
font-size:22px;
タイトルとモーダルタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
padding:12px 24px;
開くボタンの内側余白です。値を変更するとボタンの大きさが変わります。
background:rgba(15,23,42,.55);
モーダル表示時の背景の暗さです。最後の数値を大きくすると背景が濃くなり、小さくすると明るくなります。
max-width:420px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダル内部の余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthを使用しているため、画面幅に合わせてデモ全体とモーダルのサイズが自動調整されます。また、モーダル背景にはpadding:20px;を設定しているため、小さい画面でも端に張り付かず、スマートフォン・タブレット・PCで利用できます。
コメント