スワイプ・ドラッグで閉じられるポップアップの作り方
スワイプ・ドラッグで閉じられるポップアップの作り方を紹介します。このサンプルでは、ページを開いたときに表示されるポップアップを、左右へスワイプまたはドラッグすることで閉じられる動作を実装します。ボタンを押さなくても直感的な操作で閉じられるため、スマートフォンやタブレットでも扱いやすいポップアップを作成できます。
お知らせやキャンペーン情報、初回アクセス時の案内、利用規約への誘導、機能紹介など、一時的に表示したい情報を掲載する場面に適しています。ドラッグを開始するとポップアップが指に追従して移動し、一定距離以上動かすと閉じるため、タッチ操作に慣れたユーザーでも自然に利用できます。PCではマウスドラッグでも同じ動作を確認できます。
タイトル、説明文、ボタンの文字は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>
<!-- ページの内容 -->
<main class="swipe-popup_content">
<!-- ページタイトル -->
<div class="swipe-popup_title">
スワイプ・ドラッグで閉じられるポップアップ
</div>
<!-- ページ説明文 -->
<p class="swipe-popup_text">
画面内のどこからでも、好きな方向へスワイプまたはドラッグすると閉じられます。
</p>
</main>
<!-- 画面全体を覆うポップアップ -->
<div class="swipe-popup_overlay" id="swipe-popup">
<!-- ポップアップ本体 -->
<div class="swipe-popup_box" id="swipe-popup-box">
<!-- ポップアップの見出し -->
<div class="swipe-popup_heading">
お知らせ
</div>
<!-- ポップアップの本文 -->
<p class="swipe-popup_message">
画面内のどこからでも<br>
好きな方向へスワイプ・ドラッグすると閉じられます。
</p>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
min-height:100vh; /* ページの高さを画面全体へ広げる */
background:#f8fafc; /* ページ全体の背景色 */
color:#111827; /* ページ全体の文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* ページの内容 */
.swipe-popup_content{
width:100%; /* 画面幅に合わせて横幅を調整 */
max-width:760px; /* 最大横幅。値を大きくすると内容が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:40px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
border:1px solid #e5e7eb; /* ページ内容を囲む枠線 */
border-radius:20px; /* 角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* ページ内容の背景色 */
text-align:center; /* 内容を中央揃えにする */
box-sizing:border-box; /* 枠線と余白を横幅へ含める */
}
/* ページタイトル */
.swipe-popup_title{
margin:0 0 18px; /* 下側18pxの余白 */
font-size:28px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
}
/* ページ説明文 */
.swipe-popup_text{
margin:0; /* 外側余白を削除 */
color:#4b5563; /* 説明文の文字色 */
font-size:18px; /* 説明文の文字サイズ */
line-height:1.9; /* 説明文の行間 */
}
/* 画面全体を覆うポップアップ */
.swipe-popup_overlay{
position:fixed; /* ブラウザ画面を基準に固定する */
inset:0; /* 画面の上下左右すべてを覆う */
z-index:1000; /* ページ内容より手前へ表示する */
display:flex; /* ポップアップ本体を中央配置する */
justify-content:center; /* 横方向の中央へ配置する */
align-items:center; /* 縦方向の中央へ配置する */
padding:32px; /* 画面端とポップアップの間隔 */
background:rgba(15,23,42,.45); /* 画面全体を覆う半透明の背景色 */
box-sizing:border-box; /* 余白を画面サイズへ含める */
touch-action:none; /* 画面内のスワイプ操作をJavaScriptで処理できるようにする */
cursor:grab; /* ドラッグできることを示すカーソル */
user-select:none; /* ドラッグ中の文字選択を防ぐ */
}
/* ドラッグ中 */
.swipe-popup_overlay.is-dragging{
cursor:grabbing; /* ドラッグ中のカーソルへ変更する */
}
/* ポップアップ本体 */
.swipe-popup_box{
width:100%; /* 画面幅に合わせて横幅を縮小する */
max-width:460px; /* 最大横幅。値を大きくするとポップアップが広がる */
padding:40px 32px; /* 上下40px・左右32pxの内側余白 */
border-radius:20px; /* 角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* ポップアップの背景色 */
box-shadow:0 20px 50px rgba(15,23,42,.18); /* ポップアップの影 */
text-align:center; /* 内容を中央揃えにする */
box-sizing:border-box; /* 余白を横幅へ含める */
pointer-events:none; /* ポップアップ上からでも画面全体のドラッグ操作を受け取る */
transition:transform .2s ease; /* 0.2秒で元の位置へ戻す */
}
/* ポップアップの見出し */
.swipe-popup_heading{
margin:0 0 20px; /* 下側20pxの余白 */
color:#111827; /* 見出しの文字色 */
font-size:34px; /* 見出しの文字サイズ */
font-weight:700; /* 見出しを太字にする */
}
/* ポップアップの本文 */
.swipe-popup_message{
margin:0; /* 外側余白を削除 */
color:#4b5563; /* 本文の文字色 */
font-size:20px; /* 本文の文字サイズ */
line-height:2; /* 本文の行間 */
}
/* 非表示状態 */
.swipe-popup_overlay.swipe-popup_hidden{
display:none; /* ポップアップ全体を非表示にする */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* ページの内容 */
.swipe-popup_content{
width:calc(100% - 40px); /* 画面左右へ20pxずつ余白を確保する */
margin:20px auto; /* 上下20pxの余白を付けて中央配置する */
padding:24px 18px; /* スマートフォン用に内側余白を小さくする */
}
/* ページタイトル */
.swipe-popup_title{
font-size:24px; /* スマートフォン用の文字サイズ */
}
/* ページ説明文 */
.swipe-popup_text{
font-size:16px; /* スマートフォン用の文字サイズ */
}
/* 画面全体を覆うポップアップ */
.swipe-popup_overlay{
padding:20px; /* スマートフォン用に画面端との間隔を小さくする */
}
/* ポップアップ本体 */
.swipe-popup_box{
padding:32px 24px; /* スマートフォン用の内側余白 */
}
/* ポップアップの見出し */
.swipe-popup_heading{
font-size:28px; /* スマートフォン用の文字サイズ */
}
/* ポップアップの本文 */
.swipe-popup_message{
font-size:18px; /* スマートフォン用の文字サイズ */
}
}
// 画面全体を覆うポップアップを取得
const swipePopupOverlay=document.getElementById("swipe-popup");
// ポップアップ本体を取得
const swipePopupBox=document.getElementById("swipe-popup-box");
// スワイプ・ドラッグ開始時の横位置
let swipePopupStartX=0;
// スワイプ・ドラッグ開始時の縦位置
let swipePopupStartY=0;
// 横方向の移動距離
let swipePopupMoveX=0;
// 縦方向の移動距離
let swipePopupMoveY=0;
// 操作中かどうかを管理
let swipePopupDragging=false;
// ポップアップを閉じる判定距離
const swipePopupCloseDistance=120;
/*
120は120pxを表す。
値を大きくすると閉じるまでに長い操作が必要になり、
小さくすると短い操作で閉じられる。
*/
// 画面内でスワイプ・ドラッグを開始したとき
swipePopupOverlay.addEventListener("pointerdown",function(event){
// 操作中の状態にする
swipePopupDragging=true;
// 開始位置を保存する
swipePopupStartX=event.clientX;
swipePopupStartY=event.clientY;
// 移動距離を初期化する
swipePopupMoveX=0;
swipePopupMoveY=0;
// ドラッグ中はポップアップの戻るアニメーションを停止する
swipePopupBox.style.transition="none";
// ドラッグ中のクラスを追加する
swipePopupOverlay.classList.add("is-dragging");
// 画面外まで移動しても操作を継続できるようにする
swipePopupOverlay.setPointerCapture(event.pointerId);
});
// 画面内でスワイプ・ドラッグしているとき
swipePopupOverlay.addEventListener("pointermove",function(event){
// 操作中でなければ処理しない
if(!swipePopupDragging){
return;
}
// 横方向と縦方向の移動距離を計算する
swipePopupMoveX=event.clientX-swipePopupStartX;
swipePopupMoveY=event.clientY-swipePopupStartY;
// 操作した方向へポップアップを移動する
swipePopupBox.style.transform=
`translate(${swipePopupMoveX}px, ${swipePopupMoveY}px)`;
});
// スワイプ・ドラッグ終了時の処理
function swipePopupEndDrag(){
// 操作中でなければ処理しない
if(!swipePopupDragging){
return;
}
// 操作終了状態にする
swipePopupDragging=false;
// ドラッグ中のクラスを削除する
swipePopupOverlay.classList.remove("is-dragging");
// 横方向と縦方向を合わせた移動距離を計算する
const swipePopupDistance=Math.hypot(
swipePopupMoveX,
swipePopupMoveY
);
// 指定距離以上移動した場合
if(swipePopupDistance>=swipePopupCloseDistance){
// ポップアップ全体を非表示にする
swipePopupOverlay.classList.add("swipe-popup_hidden");
}else{
// 元の位置へ戻るアニメーションを有効にする
swipePopupBox.style.transition="transform .2s ease";
/*
.2sは0.2秒を表す。
値を大きくするとゆっくり戻り、
小さくすると速く戻る。
*/
// ポップアップを中央へ戻す
swipePopupBox.style.transform="translate(0, 0)";
}
// 移動距離を初期化する
swipePopupMoveX=0;
swipePopupMoveY=0;
}
// 指やマウスを離したとき
swipePopupOverlay.addEventListener("pointerup",swipePopupEndDrag);
// ポインター操作が中断されたとき
swipePopupOverlay.addEventListener("pointercancel",swipePopupEndDrag);
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページを開くとポップアップが表示され、マウスや指で画面上の好きな方向へスワイプ・ドラッグするとポップアップを閉じられます。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:460px;
ポップアップの最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:40px 32px;
ポップアップ内側の余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:20px;
ポップアップの角丸です。値を大きくすると丸みが強くなります。
script.js
const swipePopupCloseDistance=120;
120は120pxを表します。値を大きくすると長くドラッグしないと閉じず、小さくすると短い距離で閉じられます。
transform .2s ease
0.2秒で元の位置へ戻るアニメーションです。値を大きくするとゆっくり戻り、小さくすると素早く戻ります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせてポップアップのサイズが自動調整されます。また、メディアクエリで余白や文字サイズも調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント