最初から開いているモーダルウインドウを作る方法
最初から開いているモーダルウインドウを作る方法を紹介します。このサンプルでは、ページを開いた直後にモーダルウインドウが表示される状態で読み込まれます。JavaScriptで初期表示を切り替えるのではなく、最初から表示された状態を基本とし、「閉じる」ボタンをクリックするとモーダルを閉じられるシンプルな構成です。
サービス利用時の重要なお知らせ、メンテナンス情報、利用規約への案内、キャンペーンの告知、初回アクセス時に表示したい説明画面など、ページを開いた瞬間にユーザーへ必ず見せたい内容を表示したい場面で利用できます。モーダル表示中は背景の上へ重ねて表示されるため、案内内容へ自然に注目してもらえます。
HTMLではタイトル、説明文、ボタンの文字を変更でき、CSSではモーダルの横幅、背景色、余白、角丸、影、オーバーレイの色などを用途に合わせて調整できます。JavaScriptは閉じるボタンをクリックした際にモーダルを閉じる処理だけを実装しているため、初心者でも理解しやすく、実際の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="modal-open-default_wrap">
<!-- タイトル -->
<div class="modal-open-default_title">
モーダルウインドウ
</div>
<!-- 説明文 -->
<p class="modal-open-default_text">
ページを開くとモーダルウインドウが最初から表示されます。
</p>
</div>
<!-- モーダル全体 -->
<div class="modal-open-default_overlay" id="modal-overlay">
<!-- モーダル本体 -->
<div
class="modal-open-default_modal"
role="dialog"
aria-modal="true">
<!-- タイトル -->
<div class="modal-open-default_modal-title">
モーダルタイトル
</div>
<!-- 説明文 -->
<p class="modal-open-default_modal-text">
こちらはページを開いた時点で表示されるモーダルウインドウです。
</p>
<!-- 閉じるボタン -->
<button
class="modal-open-default_close"
id="modal-close"
type="button">
閉じる
</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は閉じるボタンをクリックしたときの処理を担当します。モーダルへhideクラスを追加して非表示へ切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと最初からモーダルウインドウが表示され、「閉じる」ボタンをクリックするとモーダルが閉じます。
カスタマイズできる内容
index.htmlではモーダルタイトル、説明文、閉じるボタンの文字を変更できます。用途に合わせて、お知らせ、注意事項、利用規約、キャンペーン案内などの内容へ変更できます。
style.cssではモーダル本体の横幅、背景色、余白、角丸、影、オーバーレイの色、文字サイズなどを変更できます。script.jsでは閉じる処理を編集し、用途に合わせた動作へ変更できます。
数値調整
style.css
max-width:700px;
案内エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
案内エリアの内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
padding:20px;
オーバーレイ全体の余白です。値を変更するとモーダルと画面端との間隔が変わります。
max-width:420px;
モーダル本体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:28px;
モーダル本体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
モーダルタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
padding:10px 20px;
閉じるボタンの内側余白です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:420pxにより、画面幅に応じてモーダルの横幅が自動で調整されます。また、640px以下では余白を小さくするmedia queryを使用しているため、スマートフォン・タブレット・PCで利用できます。
コメント