ポップアップバナー

Question

下記のURL(スマホ用のページ)のような、
ポップアップのようなバナーを出すには、どのように設定すればよろしいでしょうか？
タグなどありましたら教えていただきたいです。

https://www.rakuten.ne.jp/gold/amicoco/sp/###HR######IMG0cfb93d0f1a3e019e7182bf766ef6c23f.jpegIMG0###

Answer

ECマスターズの田辺です。

参考サイトのように楽天GOLDで作成したページの場合には
自由度の高い設定ができるのですが、
RMSで作成したページに
同様のポップアップバナーの設定をしますと
既存の仕組みに影響を及ぼす可能性がございます。

そのため、背景を黒地にするポップアップではなく、
フローティングバナーのように表示される
ポップアップでもよろしいでしょうか。

もしよろしければ以下のタグを
共通パーツ設定に挿入していただき
表示をご確認くださいませ。

＝この下から＝＝＝＝＝＝

input#modal {
	display: none;
}
input#modal + label {
	width: 100%;
	height: 120%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	cursor: pointer;
}
input#modal + label div {
	position: fixed;
	width: 300px; /*バナーの横幅*/
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	background: none;
	border: none;
}
input#modal + label div::before {
	content: url(バツボタン画像URL);
	position: absolute;
	bottom: 85%;
	right: 15%;
	margin: 0 -60px 0 0;
	z-index: 3;
}
input#modal:checked + label {
	display: none;
}








＝この上まで＝＝＝＝＝＝

※バナーの他にポップアップを消すための「バツボタン」をご用意いただき
バツボタン画像URL、リンク先URL、バナー画像URLを書き換えてご利用ください。

※ご用意いただいたバナーサイズや表示位置によって
数字の微調整をお願いいたします。

Answer

ありがとうございます。

早速試してみます。