最初から表示されたポップオーバーを作る方法
最初から表示されたポップオーバーを作る方法を紹介します。このサンプルでは、ページを開いた時点でポップオーバーを表示した状態にし、ボタンをクリックすると表示・非表示を切り替えられる基本的な実装を作成します。ページを開いた直後から補足情報や注意事項を見せたい場面で利用しやすい構成です。
会員サイトの初回案内、お問い合わせ画面の入力説明、ECサイトの購入時の注意事項、管理画面の操作ガイドなど、利用者へ最初に伝えたい情報を表示したい場面で活用できます。最初から表示されているため、重要な内容を見逃されにくく、必要に応じてボタンから閉じたり再表示したりできます。
タイトル、説明文、ボタンの文字、ポップオーバー内の文章はHTMLから変更でき、CSSでは横幅、余白、背景色、文字色、角丸、影などを調整できます。また、JavaScriptでは表示・非表示の切り替え処理を実装しているため、シンプルなポップオーバーを作りたい場合にも導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くとポップオーバーが最初から表示されます。
ページを開くとポップオーバーが表示されています。ボタンをクリックすると表示・非表示を切り替えられます。
コードをコピーして使おう！
<!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="popover-visible-default_wrap">
<!-- タイトル -->
<div class="popover-visible-default_title">
ポップオーバー
</div>
<!-- 説明文 -->
<p class="popover-visible-default_text">
ページを開くとポップオーバーが最初から表示されます。
</p>
<!-- ボタンとポップオーバー -->
<div class="popover-visible-default_area">
<!-- 表示切り替えボタン -->
<button
class="popover-visible-default_button"
id="popover-button"
type="button">
表示・非表示
</button>
<!-- ポップオーバー -->
<div
class="popover-visible-default_popup"
id="popover-popup">
こちらはページを開いた時点で表示されるポップオーバーです。
</div>
</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では全体の横幅、余白、背景色、文字色、ボタンの色、ポップオーバーの横幅、角丸、影、吹き出しのサイズや位置を変更できます。
script.jsでは初期表示されたポップオーバーをボタンで表示・非表示に切り替える処理を編集できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto 150px;
全体の余白です。下側150pxを変更するとポップオーバー用の表示スペースが変わります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなります。
top:calc(100% + 18px);
ボタンとポップオーバーの間隔です。18pxを変更すると表示位置が上下します。
width:300px;
ポップオーバーの横幅です。値を大きくすると広く表示されます。
padding:18px;
ポップオーバー内部の余白です。値を大きくすると文章と枠線の間隔が広がります。
border-radius:12px;
ポップオーバーの角丸です。値を変更すると丸みが変わります。
width:16px; / height:16px;
吹き出し部分の大きさです。値を変更すると矢印のサイズが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxとwidth:100%相当のレイアウトにより画面幅に合わせて表示されます。また、640px以下ではポップオーバーの横幅を260pxへ変更し、下側余白も広げているため、スマートフォン・タブレット・PCで利用できます。
コメント