×ボタンで閉じるポップアップを作る方法
×ボタンで閉じるポップアップを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、「ポップアップを表示」ボタンをクリックすると画面中央にポップアップを表示します。ポップアップ右上に配置された×ボタンをクリックすると、表示されているポップアップを閉じられます。
お知らせや補足情報、キャンペーン案内、確認メッセージなど、ページ上へ一時的な内容を表示したい場合に利用できます。閉じるための操作を×ボタンに限定しているため、外側をクリックしてもポップアップは閉じません。表示方法と閉じる方法が分かりやすい、基本的な構成です。
HTMLではタイトル、本文、表示ボタン、×ボタンの文字を変更できます。CSSでは背景色、横幅、余白、角丸、影、配置などを調整でき、JavaScriptでは表示ボタンと×ボタンによる開閉処理を実装しています。スマートフォン・タブレット・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="close-button-popup_wrap">
<!-- ポップアップ本体 -->
<div class="close-button-popup_overlay" id="close-button-popup">
<div class="close-button-popup_box">
<!-- ×ボタン -->
<button
class="close-button-popup_close"
id="close-button-popup-close"
type="button"
aria-label="閉じる">
×
</button>
<!-- タイトル -->
<div class="close-button-popup_heading">
お知らせ
</div>
<!-- メッセージ -->
<p class="close-button-popup_message">
このポップアップは右上の<br>
×ボタンで閉じます。
</p>
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除する */
padding:40px 20px; /* 上下40px・左右20pxの余白を付ける */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* ポップアップ全体と子要素 */
.close-button-popup_wrap,
.close-button-popup_wrap *{
box-sizing:border-box; /* paddingとborderを横幅や高さに含める */
}
/* ポップアップ全体 */
.close-button-popup_wrap{
position:relative; /* オーバーレイの配置基準にする */
width:100%; /* 画面幅に合わせて縮小する */
max-width:760px; /* 最大横幅。値を大きくすると全体が横に広がる */
min-height:620px; /* 最小の高さ。値を大きくすると表示領域が高くなる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
border:1px solid #e5e7eb; /* 全体を囲む枠線 */
border-radius:20px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* 全体の背景色 */
overflow:hidden; /* 角丸からはみ出した内容を隠す */
}
/* ポップアップの背景 */
.close-button-popup_overlay{
position:absolute; /* 全体の表示領域に重ねて配置する */
inset:0; /* 上下左右を0にして全体を覆う */
display:flex; /* ポップアップを中央配置する */
align-items:center; /* 縦方向の中央へ配置する */
justify-content:center; /* 横方向の中央へ配置する */
padding:32px; /* 画面端とポップアップの間隔 */
background:rgba(15,23,42,.45); /* 半透明の背景色 */
}
/* ポップアップ本体 */
.close-button-popup_box{
position:relative; /* ×ボタンの配置基準にする */
width:100%; /* 表示領域に合わせて縮小する */
max-width:460px; /* 最大横幅。値を大きくするとポップアップが横に広がる */
padding:48px 32px 40px; /* 上48px・左右32px・下40pxの内側余白 */
border-radius:20px; /* ポップアップの角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* ポップアップの背景色 */
box-shadow:0 20px 50px rgba(15,23,42,.18); /* 下方向20px・ぼかし50pxの影を付ける */
text-align:center; /* 内容を中央揃えにする */
}
/* ×ボタン */
.close-button-popup_close{
position:absolute; /* ポップアップ右上へ配置する */
top:18px; /* 上端から18px離して配置する */
right:18px; /* 右端から18px離して配置する */
display:flex; /* ×印を中央配置する */
align-items:center; /* ×印を縦方向中央へ配置する */
justify-content:center; /* ×印を横方向中央へ配置する */
width:42px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
height:42px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
padding:0; /* ブラウザ標準の内側余白を削除する */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:50%; /* ボタンを円形にする */
background:#eef2f7; /* ボタンの背景色 */
color:#374151; /* ×印の色 */
font-family:Arial,sans-serif; /* ×印の位置が安定しやすいフォントを使用する */
font-size:26px; /* ×印の文字サイズ */
font-weight:400; /* ×印の線が太くなりすぎないようにする */
line-height:1; /* ×印の行間を文字サイズと同じ高さにする */
text-align:center; /* ×印を中央揃えにする */
cursor:pointer; /* マウスポインターを指の形にする */
transform:translateY(-1px); /* ×印を1px上へ移動して見た目の中央へ調整する */
transition:background-color .3s ease; /* 0.3秒で背景色を切り替える */
}
/* ×ボタンへマウスカーソルを重ねたとき */
.close-button-popup_close:hover{
background:#dbe5f1; /* ホバー時の背景色 */
}
/* ×ボタンをキーボード操作したとき */
.close-button-popup_close:focus-visible{
outline:3px solid rgba(37,99,235,.3); /* フォーカス枠の太さと色 */
outline-offset:3px; /* ボタンとフォーカス枠の間隔 */
}
/* ポップアップのタイトル */
.close-button-popup_heading{
margin:0 48px 20px; /* 左右に48px、下側に20pxの余白を付ける */
color:#111827; /* タイトルの文字色 */
font-size:34px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* ポップアップのメッセージ */
.close-button-popup_message{
margin:0; /* ブラウザ標準の外側余白を削除する */
color:#4b5563; /* メッセージの文字色 */
font-size:20px; /* メッセージの文字サイズ */
line-height:2; /* メッセージの行間 */
}
/* ポップアップを閉じた状態 */
.close-button-popup_hidden{
display:none; /* ポップアップを非表示にする */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* ページ全体 */
body{
padding:20px 12px; /* スマートフォンでは画面端の余白を小さくする */
}
/* ポップアップ全体 */
.close-button-popup_wrap{
min-height:520px; /* スマートフォンでの最小の高さ */
margin:20px auto; /* スマートフォンでは上下の余白を小さくする */
}
/* ポップアップの背景 */
.close-button-popup_overlay{
padding:18px; /* スマートフォンでは画面端との間隔を小さくする */
}
/* ポップアップ本体 */
.close-button-popup_box{
padding:44px 24px 32px; /* スマートフォン用の内側余白 */
}
/* ×ボタン */
.close-button-popup_close{
top:14px; /* スマートフォンでは上端から14px離す */
right:14px; /* スマートフォンでは右端から14px離す */
}
/* ポップアップのタイトル */
.close-button-popup_heading{
margin:0 44px 18px; /* ×ボタンと重ならないよう左右の余白を調整する */
font-size:28px; /* スマートフォン用の文字サイズ */
}
/* ポップアップのメッセージ */
.close-button-popup_message{
font-size:18px; /* スマートフォン用の文字サイズ */
}
}
// ポップアップを取得
const closeButtonPopup =
document.getElementById("close-button-popup");
// ×ボタンを取得
const closeButton =
document.getElementById("close-button-popup-close");
// ×ボタンをクリックしたとき
closeButton.addEventListener("click",function(){
// ポップアップを非表示にする
closeButtonPopup.classList.add("close-button-popup_hidden");
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページを開くとポップアップが表示され、右上の×ボタンをクリックすると閉じるシンプルなサンプルです。ポップアップは×ボタンのみで閉じる仕様となっており、閉じる操作を分かりやすく実装したい場面で利用できます。
HTMLではポップアップ本体やタイトル、メッセージ、×ボタンを配置し、CSSでは背景や角丸、影、ボタンデザインなどの見た目を設定しています。JavaScriptでは×ボタンがクリックされたときにポップアップを閉じる処理のみを記述しているため、動作の仕組みも理解しやすい構成です。
デザインと動作をそれぞれ別ファイルへ分けているため、見た目だけ変更したい場合はCSS、表示内容を変更したい場合はHTML、閉じる動作を変更したい場合は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ではタイトル、メッセージ、×ボタンのaria-labelなどを変更できます。
style.cssではポップアップの横幅、背景色、余白、角丸、影、文字サイズ、×ボタンの大きさや色、配置位置などを変更できます。
script.jsでは×ボタンを押したときの処理を編集できます。
数値調整
style.css
max-width:760px;
ポップアップ全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
min-height:620px;
ポップアップ全体の最小高さです。値を大きくすると高さが増え、小さくするとコンパクトになります。
padding:48px 32px 40px;
ポップアップ本体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
max-width:460px;
ポップアップ本体の最大横幅です。値を変更するとポップアップ本体の横幅が変わります。
border-radius:20px;
ポップアップ本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:42px;・height:42px;
×ボタンの大きさです。値を大きくすると押しやすくなり、小さくするとコンパクトになります。
font-size:26px;
×印の文字サイズです。値を大きくすると×印が大きく表示され、小さくすると控えめになります。
transition:background-color .3s ease;
ホバー時の背景色が切り替わる時間です。.3は0.3秒を表します。値を大きくするとゆっくり変化し、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%とmax-widthを使用しているため、画面幅に合わせてポップアップが自動で縮小されます。また、@media (max-width:640px)では余白や文字サイズを調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント