ページ読み込み時に自動表示するモーダルウインドウを作る方法
HTML・CSS・JavaScriptを使って、ページ読み込み時に自動表示するモーダルウインドウを作る方法を紹介します。このサンプルでは、ページを開いたタイミングでモーダルウインドウを表示し、閉じるボタンや背景クリックで閉じる動作を実装しています。お知らせ表示やキャンペーン案内、初回表示メッセージなどに利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ読み込み時に自動表示するモーダル
このデモでは、ページを開いたタイミングでモーダルウインドウが自動表示されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定します -->
<meta charset="UTF-8">
<!-- ページタイトルです -->
<title>ページ読み込み時に自動表示するモーダルウインドウ</title>
<!-- CSSファイルを読み込みます -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- コンテンツ全体を囲むエリアです -->
<div class="auto-open-modal-window_wrap">
<!-- タイトルです -->
<div class="auto-open-modal-window_title">
ページ読み込み時に自動表示するモーダル
</div>
<!-- 説明文です -->
<p class="auto-open-modal-window_text">
ページを開くとモーダルウインドウが自動表示されます。
</p>
</div>
<!-- モーダル背景です -->
<div class="auto-open-modal-window_overlay" data-modal-overlay>
<!-- モーダル本体です -->
<div class="auto-open-modal-window_modal" role="dialog" aria-modal="true">
<!-- モーダルタイトルです -->
<div class="auto-open-modal-window_modal-title">
ようこそ！
</div>
<!-- モーダル本文です -->
<p class="auto-open-modal-window_modal-text">
このモーダルウインドウは、ページを読み込んだタイミングで自動表示されています。<br>
「閉じる」ボタン、または背景部分をクリックすると閉じることができます。
</p>
<!-- モーダルを閉じるボタンです -->
<button
class="auto-open-modal-window_close"
type="button"
data-modal-close
>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込みます -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。
sample/
├── index.html
├── style.css
└── script.js
index.html をブラウザで開くと、ページ読み込み時にモーダルウインドウが自動表示されます。「閉じる」ボタン、または背景部分をクリックするとモーダルを閉じることができます。
コメント