画面上部に表示するポップアップを作る方法
画面上部に表示するポップアップを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、ページを開いたときに上部へ表示されるポップアップを作成します。基本のポップアップを中央ではなく上側へ配置することで、お知らせや案内などをページ上部で目立たせて表示できます。
Webサイトの重要なお知らせ、キャンペーンの案内、会員サイトの通知、ECサイトの情報表示など、ページを開いた利用者へ最初に伝えたい内容を表示する場面に利用できます。ポップアップには「閉じる」ボタンを用意しており、クリックすると非表示になります。ページ読み込み時に表示されるシンプルな構成なので、初心者でも仕組みを確認しながら導入できます。
HTMLではポップアップの見出しやメッセージ、ボタンの文章を変更でき、CSSでは横幅、上部からの余白、内側余白、文字サイズ、角丸、背景色、影などを調整できます。レスポンシブにも対応しており、640px以下では余白や文字サイズを小さくするため、スマートフォン・タブレット・PCで利用しやすい上部表示ポップアップとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ読み込み時に画面上部へ表示されるポップアップを再現したデモです。
これはページを開いたときに
画面上部へ表示されるポップアップです。
ページ読み込み時に画面上部へ表示される状態を再現しています。「閉じる」で非表示になり、「もう一度表示する」を押すと再び表示されます。
コードをコピーして使おう！
<!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="top-popup_wrap">
<!-- ポップアップ -->
<div class="top-popup_popup" id="top-popup">
<!-- ポップアップ本体 -->
<div class="top-popup_box">
<!-- 見出し -->
<div class="top-popup_heading">
お知らせ
</div>
<!-- メッセージ -->
<p class="top-popup_message">
これはページを開いたときに<br>
画面上部へ表示されるポップアップです。
</p>
<!-- 閉じるボタン -->
<button class="top-popup_close" type="button">
閉じる
</button>
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでポップアップの見出し、メッセージ、閉じるボタンを作成し、CSSでポップアップを表示エリアの上部へ配置します。JavaScriptでは閉じるボタンがクリックされたときに非表示用のクラスを追加し、ポップアップを閉じます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはポップアップの内容を構成するファイルです。「お知らせ」の見出し、メッセージ、「閉じる」のボタンテキストを変更できます。
style.cssはポップアップの配置とデザインを設定するファイルです。ポップアップの横幅、上部からの余白、内側余白、背景色、文字サイズ、角丸、影などを変更できます。
script.jsはポップアップを閉じる処理を行うファイルです。「閉じる」ボタンがクリックされるとtop-popup_hiddenクラスを追加し、ポップアップを非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと表示エリアの上部にポップアップが表示されます。「閉じる」ボタンをクリックするとポップアップが非表示になります。
カスタマイズできる内容
index.htmlではポップアップの見出し、メッセージ、閉じるボタンの文章を変更できます。style.cssではポップアップの最大横幅、上部からの余白、背景色、文字色、文字サイズ、角丸、影などを変更できます。上部からの位置を調整したい場合は、.top-popup_popupのpaddingを変更します。
数値調整
style.css
max-width:760px;
ポップアップ表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
min-height:620px;
ポップアップ表示エリアの最小高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。
border-radius:20px;
表示エリアとポップアップ本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:32px;
ポップアップを配置する領域の余白です。上側の値を変更することで、ポップアップと表示エリア上端の間隔を調整できます。
max-width:460px;
ポップアップ本体の最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
padding:40px 32px;
ポップアップ本体の内側余白です。上下の40pxを大きくすると縦方向の余白が広がり、左右の32pxを大きくすると横方向の余白が広がります。
font-size:34px;
見出しの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
font-size:20px;
メッセージの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
box-shadow:0 20px 50px rgba(15,23,42,.18);
ポップアップ本体の影です。20pxを変更すると影の縦方向の位置が変わり、50pxを変更すると影のぼかし範囲が変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより、画面幅に合わせてポップアップが縮小されます。また、640px以下ではポップアップ周囲の余白を24px 18px、本体の内側余白を32px 24pxへ変更し、見出しとメッセージの文字サイズも小さくしています。スマートフォン・タブレット・PCで利用できます。
コメント