スクロール位置で自動表示するモーダルウインドウの作り方
スクロール位置で自動表示するモーダルウインドウの作り方を紹介します。ページを開いた直後ではなく、ユーザーが一定の位置までスクロールしたタイミングでモーダルを表示できるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、外部ライブラリを使わずに、Webページ内の案内やお知らせ表示を作成できます。
サンプルコードでは、ページを下へスクロールし、指定したスクロール位置を超えるとモーダルウインドウが自動で表示されます。モーダル内の「閉じる」ボタンをクリックするとモーダルを閉じます。一度表示された後は、同じページ内で何度も繰り返し表示されない構成にしているため、ユーザーの閲覧を邪魔しにくい動作になります。
ECサイトの商品説明ページ、サービス紹介ページ、ブログ記事、会員サイトのお知らせ欄などで、ページを読み進めたユーザーへ補足情報を表示したい場合に活用できます。表示する位置はJavaScriptの数値で変更でき、モーダル内のタイトルや本文はHTML、色やサイズなどの見た目はCSSから調整できます。スクロールに合わせて自然に案内を表示したい場合の基本コードとして利用しやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを下へスクロールすると、指定したスクロール位置でモーダルウインドウが自動表示されます。
ページ先頭から指定したスクロール位置を超えると、モーダルウインドウが自動表示されます。再度確認する場合は「動作をもう一度確認する」をクリックしてください。
コードをコピーして使おう！
<!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-window-auto-open-on-scroll_page">
<!-- メイン表示エリア -->
<div class="modal-window-auto-open-on-scroll_wrap">
<!-- タイトル -->
<h1 class="modal-window-auto-open-on-scroll_title">
スクロール位置で自動表示するモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-window-auto-open-on-scroll_text">
ページを下へスクロールすると、指定したスクロール位置でモーダルウインドウが自動表示されます。
</p>
</div>
<!-- スクロール確認用の本文エリア -->
<div class="modal-window-auto-open-on-scroll_content">
<!-- 本文ブロック -->
<p class="modal-window-auto-open-on-scroll_content-text">
このエリアはスクロール位置を確認するための本文エリアです。ページを下へスクロールすると、指定した位置でモーダルが表示されます。
</p>
</div>
</div>
<!-- モーダル背景 -->
<div
class="modal-window-auto-open-on-scroll_overlay"
data-scroll-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-window-auto-open-on-scroll_modal"
role="dialog"
aria-modal="true"
aria-labelledby="scroll-modal-title">
<!-- モーダルタイトル -->
<h2
id="scroll-modal-title"
class="modal-window-auto-open-on-scroll_modal-title">
スクロール位置のお知らせ
</h2>
<!-- モーダル本文 -->
<p class="modal-window-auto-open-on-scroll_modal-text">
指定したスクロール位置を超えたため、モーダルウインドウが自動表示されました。閉じるボタンをクリックするとモーダルを閉じます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-window-auto-open-on-scroll_close"
type="button"
data-scroll-modal-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでページ本文とモーダルウインドウの画面構成を作成し、CSSでレイアウトやデザインを設定、JavaScriptでスクロール位置を判定してモーダルを自動表示します。 ファイルごとに役割を分けているため、表示内容・見た目・表示位置の調整を個別に行いやすい構成です。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
・index.html：ページ本文・モーダルタイトル・モーダル本文・閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：ページの高さ・背景色・文字サイズ・余白・角丸・影・モーダルの横幅・背景オーバーレイなど、見た目全体を設定します。
・script.js：ページ先頭からのスクロール量を判定し、指定した位置を超えた時にモーダルを表示します。閉じるボタンでモーダルを非表示にします。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ ページを下へスクロールします。
⑤ ページ先頭から400px以上スクロールするとモーダルが自動表示されます。
⑥ 「閉じる」ボタンをクリックするとモーダルを閉じます。
カスタマイズできる内容
・index.htmlでは、ページのタイトル・説明文・モーダルタイトル・モーダル本文・閉じるボタンの文字を変更できます。
・style.cssでは、ページの高さ・背景色・文字サイズ・余白・角丸・影・モーダルの横幅・背景オーバーレイの暗さなどを変更できます。
・script.jsでは、モーダルを表示するスクロール位置を変更できます。現在はページ先頭から400px以上スクロールした時に表示されます。
数値調整
・script.jsの「400」は、ページ先頭から400px以上スクロールした時にモーダルを表示する設定です。値を大きくすると下の位置で表示され、小さくすると上の位置で表示されます。
・style.cssの「min-height:1200px;」を変更すると、ページ全体の高さを調整できます。値を大きくするとスクロール量が増えます。
・style.cssの「max-width:420px;」を変更すると、モーダルの横幅を調整できます。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると背景の暗さを調整できます。値を大きくすると暗く、小さくすると明るく表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」「box-sizing:border-box;」を設定しているため、スマートフォン・タブレット・PCでも画面幅に合わせてモーダルが表示されます。また、640px以下ではメイン表示エリアの余白を調整して、狭い画面でも見やすく表示されるようにしています。
コメント