https://www.sycom.co.jp/custom/js_rs01/insert_config_saving.js

1const configSavingFragment = /*html*/ `
2					<div class="configSavingModalOverlay" id="configModal">
3						<div class="inner01">
4						<button class="modal-close" id="configModalClose"><span>閉じる</span></button>
5							<div class="inner02">
6								<div class="configSavingContentsWrap">
7									<div class="area01">
8										<div class="inner01">
9											<h2 class="tx01"><img src="img/config_saving/tx06.png" alt="豊富なラインナップから選べる！" class="spNone"><img src="img/config_saving/tx06s.png" alt="豊富なラインナップから選べる！" class="pcNone"></h2>
10											<p class="tx02"><img src="img/config_saving/tx07.png" alt="サイコムのBTOはカスタマイズした構成を保存したりシェアすることができます。" class="spNone"><img src="img/config_saving/tx07s.png" alt="サイコムのBTOはカスタマイズした構成を保存したりシェアすることができます。" class="pcNone"></p>
11											<ul>
12												<li><img src="img/config_saving/tx08.png" alt="パーツ構成をじっくり決めたい　カスタマイズした構成をいつでも⾒直しできます！"></li>
13												<li><img src="img/config_saving/tx09.png" alt="PCモデルやパーツ構成を迷っている　構成を複数保存して、いろいろ比べることができます！"></li>
14												<li><img src="img/config_saving/tx10.png" alt="選んだパーツ構成をシェアしたい　カスタマイズ内容をXやメールでシェアできます！"></li>
15											</ul>
16										</div>
17									</div>
18									<div class="area02">
19										<div class="inner01">
20											<p class="tx03">カスタマイズ画面から簡単に使える！</p>
21											<div class="wrap01 between">
22												<div class="img01"><img src="img/config_saving/tx02.png" alt="" class="spNone"><img src="img/config_saving/tx02s.png" alt="" class="pcNone"></div>
23												<div class="textWrap">
24													<div class="col01 no01">
25														<p class="no"><img src="img/config_saving/tx03.png" alt="1"></p>
26														<p class="tx04">まずはカスタマイズをしてみよう</p>
27														<p class="tx05"><span class="red">赤い数字</span>がカスタマイズしたパーツです</p>
28													</div>
29													<p><img src="img/config_saving/tx05.png" alt="" class="pcNone"></p>
30													<div class="col01 no02">
31														<p class="no"><img src="img/config_saving/tx04.png" alt="2"></p>
32														<p class="tx04">構成を保存 or シェアしよう</p>
33														<p class="tx05">カスタマイズが終わったら、<br>以下のいずれかのボタンで構成を保存したり、<br>シェアすることができます。</p>
34														<p class="tx06">クリップボードへコピー</p>
35														<p class="tx07">その時点でのカスタマイズ構成が反映されたURLを<br>クリップボードにコピーできます。</p>
36														<ul>
37															<li>
38																<div class="icon"><img src="img/config_saving/ic_x.png" alt="X"></div>
39																<p>その時点でのカスタマイズ構成を<br>Xにシェアできます。</p>
40															</li>
41															<li>
42																<div class="icon"><img src="img/config_saving/ic_mail.png" alt="mail"></div>
43																<p>その時点でのカスタマイズ構成が反映された<br>URLをメール送信できます。</p>
44															</li>
45														</ul>
46													</div>
47												</div>
48											</div>
49										</div>
50									</div>
51								</div>
52							</div>
53						</div>
54					</div>
55`;
56
57/* #rightNavigation2Wrap ul に追加するリストアイテム */
58const navigationItemsFragment = /*html*/ `
59						<li class="mt10 config_saving_modal"><img src="img/config_saving_btn.png" alt="途中で構成を保存できます！構成保存の使い方を見る" width="180" height="134"></li>
60`;
61
62
63$(document).ready(function () {
64	document.querySelectorAll('#config_saving_modal').forEach(el => {
65		el.innerHTML = configSavingFragment;
66	});
67
68	const navUl = document.querySelector('#insertUL01');
69	if (navUl) {
70		navUl.insertAdjacentHTML('beforeend', navigationItemsFragment);
71	}
72	
73	
74	// 2025/06/19 追加（構成保存の使い方）
75	const triggers = document.querySelectorAll('.config_saving_modal');
76	const modal = document.getElementById('configModal');
77	const closeBtn = document.getElementById('configModalClose');
78
79	// モーダルを開く関数
80	function openModal() {
81		modal.classList.add('active');
82	}
83
84	// モーダルを閉じる関数
85	function closeModal() {
86		modal.classList.remove('active');
87	}
88
89	// 各トリガーにクリックイベントをバインド

90	triggers.forEach(trigger => {
91		trigger.addEventListener('click', openModal);
92	});
93
94	// 閉じるボタン
95	closeBtn.addEventListener('click', closeModal);
96
97	// オーバーレイ余白クリックで閉じる
98	modal.addEventListener('click', function (e) {
99		if (e.target === modal) {
100			closeModal();
101		}
102	});
103
104	// ESCキーで閉じる
105	document.addEventListener('keydown', function (e) {
106		if (e.key === 'Escape' && modal.classList.contains('active')) {
107			closeModal();
108		}
109	});
110});