閉じるボタンで閉じられるポップアップを作る方法
閉じるボタンで閉じられるポップアップをHTML・CSS・JavaScriptで作成する方法を紹介します。ページを開いたタイミングでポップアップを表示し、「閉じる」ボタンをクリックすると非表示になるシンプルな構成です。基本的なポップアップの仕組みを学びたい方や、実際のWebサイトへ導入できるサンプルを探している方にも適しています。
このサンプルでは、ポップアップ本体・背景オーバーレイ・閉じるボタンを実装し、JavaScriptで表示・非表示を切り替えます。また、デモでは「もう一度表示する」ボタンも用意しているため、何度でも動作を確認できます。タイトルや説明文、背景色、ボタンの色、ポップアップのサイズなどはコード内で自由に変更できるため、用途に合わせてカスタマイズしやすい構成です。
お問い合わせ画面での注意事項、ECサイトのキャンペーン案内、会員サイトのお知らせ、管理画面での重要な通知など、ユーザーへ最初に伝えたい情報を表示したい場面で活用できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも見やすく表示されます。サンプルコードをそのまま利用しながら、自分の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="close-popup_overlay" id="close-popup">
<!-- ポップアップ本体 -->
<div class="close-popup_box">
<!-- タイトル -->
<h1 class="close-popup_title">
お知らせ
</h1>
<!-- 説明文 -->
<p class="close-popup_text">
閉じるボタンをクリックすると<br>
ポップアップを閉じられます。
</p>
<!-- 閉じるボタン -->
<button class="close-popup_button" id="close-popup-button" 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は閉じるボタンをクリックしたときの処理を設定するファイルです。ポップアップ全体へis-hiddenクラスを追加し、CSSのdisplay:none;で非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと画面中央にポップアップが表示され、「閉じる」ボタンをクリックすると非表示になります。
カスタマイズできる内容
index.htmlではポップアップ内のタイトル、説明文、閉じるボタンの文字を変更できます。お知らせ、注意事項、キャンペーン案内など、用途に合わせた内容へ書き換えられます。
style.cssではオーバーレイの背景色と透明度、ポップアップの最大横幅、内側余白、枠線、角丸、影、文字色、文字サイズ、閉じるボタンの横幅、色、角丸などを変更できます。
script.jsでは閉じるボタンとポップアップを取得するIDや、非表示に使用するis-hiddenクラスを編集できます。
数値調整
style.css
padding:32px;
画面端とポップアップの間隔です。値を大きくすると周囲の余白が広がり、小さくすると画面端へ近づきます。
max-width:460px;
ポップアップの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:40px 32px;
ポップアップ内部の余白です。上下の40pxを大きくすると縦方向の余白が広がり、左右の32pxを大きくすると文章と枠線の間隔が広がります。
border-radius:20px;
ポップアップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:34px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 32px;
説明文と閉じるボタンの間隔です。32pxを大きくすると間隔が広がり、小さくすると近づきます。
min-width:160px;
閉じるボタンの最小横幅です。値を大きくするとボタンが横に広がり、小さくするとコンパクトになります。
padding:14px 40px;
閉じるボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の40pxを大きくすると横に広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:460pxによって、画面幅に合わせてポップアップが縮小されます。また、640px以下ではメディアクエリを使用し、オーバーレイの余白を20px、ポップアップ内部の余白を32px 24px、タイトルと説明文の文字サイズを小さくしています。スマートフォン・タブレット・PCで利用できます。
コメント