スクロールでモーダル表示
（×ボタンで非表示）
スクロールで特定のセクション位置に達したらモーダルを表示し、
×ボタンで非表示にすると指定した期間中再表示しません（デフォルトでは1日間）
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
|
× | ◯ ※4 |
| ※留意事項 | |||
|---|---|---|---|
|
※1：バナーを表示させたいタイミングに配置されているセクションにクラス名「js-banner_trigger」を追加することでタイミングをコントロール可能です。 ※2：デフォルトではhover時の画像透過は無しにしています。CSSで透過ありに変更できます。 |
デモ
「ここでバナー表示します」セクションに到達すると、バナーが表示されます。
一度閉じる[✕]ボタンを押すと、1日間（デフォルト）再表示されません。
閉じるボタンを押すとcookieが登録されるので、登録されたcookieを削除（下記参照）すれば再度挙動をご確認できます。
※デフォルト設定では、画面幅が769px以下（SP）でも表示されます。
▼削除方法▼
構造図
デモのパーツの構造を説明しています。
※デモでは分かりやすくセクション内にパーツを入れていますが、
余白等を削除する必要が出てくるため実際はフッター等に入れるのがおすすめです。
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSをカスタムCSSに記述。
- JavaScriptを使用したいパーツのセクション内の一番下に配置。複数ページ設置する場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- バナーを表示させたいタイミングに配置されているセクションにクラス名「js-banner_trigger」を追加。
- モーダル表示用の行（row）を作成し、
クラス名「js-popup_row popup_row js-displayNone」の3つを追加。
ページ下部に設置する。（複数ページに表示する場合は共通フッターに設置） - 上記row内に共通パーツを作成し、①バナー閉じる用[✕]画像と②バナー画像を配置。
- ①バナー閉じる用[✕]画像にクラス名「js-popup_close_img popup_close_img」の2つを追加。
リンク先は設定しません。 - ②バナー画像にクラス名「popup_img」を追加。
リンク先を[任意のURL]に設定。 - 画像の幅等は適宜CSSで変更してください。
※JSパーツ集では共通パーツ機能で作成しているため、内容によってはCSSの調整（sectionからの紐づけ）が必要です。 -
SPで非表示にしたい場合、モーダル表示用の行（row）にクラス名「pcOnly」を追加。
-
新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
rowは新規で作成した方がCSSの影響を受けないので安心かと思います。
JavaScript設定方法
- JS内で【Cookieに保存しておく期間】と検索。
- Cookieに保存しておく期間を変更する場合は変数【let expires = 〇〇;】の値を変更してください。
（例①日数単位）：1日→【let expires = 1;】
（例②時間単位）：3時間→【let expires = 3 / 24;】 - デフォルトでCookieに保存しておく期間は30日間（30）に設定しています。
無期限にはできないので期間を必ず設定してください。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
2025-06-30更新（v1.0.0）
<script>
/* -------------------------------------
スクロールでモーダル表示（×ボタンで非表示） v1.0.0
------------------------------------- */
document.addEventListener('DOMContentLoaded', function () {
/*------------- 変数定義 【変更可能】 START -------------*/
/* cookieに保存しておく期間 【 1日間（デフォルトでは日数単位） 】 */
const expiresDays = 1;
/*------------- 変数定義 【変更可能】 END -------------*/
const cookieKey = "bannerClosed";
const cookieValue = "true";
const html = document.documentElement;
const closeBtn = document.querySelector('.js-popup_close_img');
const banner = document.querySelector('.js-popup_row');
const header = document.querySelector('.navi_base_custom');
const trigger = document.querySelector('.js-banner_trigger');
const expireDate = new Date();
expireDate.setTime(expireDate.getTime() + expiresDays * 24 * 60 * 60 * 1000);
const cookieString = `${cookieKey}=${cookieValue}; expires=${expireDate.toGMTString()}; path=/`;
let scrollFlag = false;
function registration() {
console.log("Cookieが登録されました");
if (banner) banner.style.display = 'none';
html.classList.remove('js-overflowHidden');
}
function authenticated() {
console.log("認証できました");
scrollFlag = true;
}
function unauthenticated() {
console.log("認証できませんでした");
}
function openBanner() {
if (!banner || !trigger || !header) return;
const triggerPosition = trigger.getBoundingClientRect().top + window.scrollY;
const scrollTop = window.scrollY;
const headerHeight = header.offsetHeight;
if (scrollTop >= triggerPosition - headerHeight && !scrollFlag) {
scrollFlag = true;
banner.classList.remove('js-displayNone');
html.classList.add('js-overflowHidden');
}
}
/* スクロール・ロード時に openBanner 実行 */
window.addEventListener('scroll', openBanner);
window.addEventListener('load', openBanner);
/* バナー閉じるクリック処理 */
if (closeBtn) {
closeBtn.addEventListener('click', function (event) {
event.preventDefault();
document.cookie = cookieString;
registration();
});
}
/* Cookieチェック */
function checkCookie() {
const cookies = document.cookie.split(';').map(c => c.trim());
return cookies.some(c => c.startsWith(`${cookieKey}=${cookieValue}`));
}
/* Cookieに応じて処理 */
if (checkCookie()) {
authenticated();
} else {
unauthenticated();
}
});
/* -------------------------------------
スクロールでモーダル表示（×ボタンで非表示） END
------------------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-09-06更新（v1.0.0）
/*----- スクロールでモーダル表示（×ボタンで非表示）（×ボタンで非表示） START v1.0.0-----*/
/* 再読み込み時に一瞬見えてしまう（チラつき）防止用クラス */
.js-displayNone {
display: none !important;
}
.row {
&.popup_row {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
width: 100%;
height: 110vh;
background: rgba(#000,.6);
transform: translate(-50%, -50%);
.col {
width: 100%;
max-width: 500px;
position: relative;
padding: 20px;
.component {
/* CTAでなくても使えるようにネスト飛ばし（必要あれば各自修正してください）*/
// ✕ボタン
&.popup_close_img {
position: absolute;
top: -13px;
right: -13px;
z-index: 2;
img {
cursor: pointer;
max-width: 30px !important;
}
}
// バナー本体
&.popup_img {
a {
&:hover {
opacity: 1;//デフォルトでは透過なし
}
img {
&:hover {
opacity: 1;//二重透過対策
}
}
}
}
}
}
}
}
// モーダルが出ている間はスクロールバー非表示
.js-overflowHidden {
overflow: hidden !important;
}
/*----- スクロールでモーダル表示（×ボタンで非表示） END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-09-06更新（v1.0.0）
/*-- スクロールでモーダル表示（×ボタンで非表示） 編集画面用 START v1.0.0--*/
.js-displayNone {
display: block !important;
border: 1px solid #000;
&::before {
content: "JS読み込み後にクラスを外す。ちらつき防止（JSで使用）";
position: absolute;
color: #fff;
background: #000;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
}
.row {
&.popup_row {
display: flex !important;
position: relative;
top: initial;
left: initial;
transform: initial;
width: 100%;
height: initial;
margin-top: 50px;
border: 1px solid red;
&::before {
content: "スクロールでモーダル表示（×ボタンで非表示）Row";
position: absolute;
color: #fff;
background: red;
padding: 5px;
font-size: 16px;
right: 0;
top: -24px;
}
.col {
.component {
&.image {
&.popup_close_img {
position: relative;
top: initial;
right: initial;
z-index: initial;
}
}
}
}
}
}
/*-- スクロールでモーダル表示（×ボタンで非表示） 編集画面用 END --*/
© Basic Inc. All Rights Reserved.