• 文字サイズ
解決済

デザインレシピのポップアップバナーを表示させる方法

  • 相談者:非公開
  • 2019/09/02 16:41
SFC有限会社 オレンジのツナギ職人 店長の菅沼です。

デザインレシピ
ポップアップバナーを表示させる方法
最初見えたのですが実際の画面上からCloseをクリックしたら見えなくなりました。
新たに楽天トップから検索してページに入っても見えません。
一度Closeをクリックした人は見えなくなるのでしょうか?
※ログアウトしても見えませんでした。
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

**************HTML**************
<input type="checkbox" name="modal" id="modal" ="" checked>
<label id="modallabel" for="modal" ="">
<div ="">
<a href="https://coupon.rakuten.co.jp/getCoupon?getkey=UkhKWC1CRFVMLUZNSFctVEQ5SQ--&rt=">
<img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/02887904/imgrc0079894986.gif">
</a>
</div ="">
</label ="">
<script ="">
jQuery(function($){
var k = 'modal';
var v = 'done';
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
});
</script ="">
<style ="">
p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal label {
width: 100%;
height: 120%;
position: fixed;
top: 147px;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 340px; /*画像の横幅*/
height:143px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 120px;
}
input#modal label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked label {
display: none;
}
input#modal label img{
width: 340px; /*画像の横幅*/
height:143px; /*画像の縦幅*/
}
</style ="">
投稿内容について報告する




  • 返信者:非公開
  • 2019/09/02 19:30
ECマスターズの伊藤です。

> 最初見えたのですが実際の画面上からCloseをクリックしたら見えなくなりました。
> 新たに楽天トップから検索してページ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/09/03 07:54
SFC有限会社 オレンジのツナギ職人 店長の菅沼です。

ありがとうございました。

モバイル B
更新・別ページ遷移時のバナー表示:表示されます
………(省略)………
  • 返信者:非公開
  • 2019/09/03 15:07
ECマスターズの伊藤です。

> リンクを付けました。

大変失礼いたしました。モバイルBで、リンクの記載が漏れておりました。
先程、モバイルBにもリ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/11 15:43
再度の質問です。

スマートフォン B
更新・別ページ遷移時のバナー表示:表示されます
から
スマートフォン A
更新・別ページ遷移時のバナー表示:………(省略)………
  • 返信者:非公開
  • 2019/10/11 22:02
ECマスターズの伊藤です。

> スマートフォン A
> 更新・別ページ遷移時のバナー表示:表示されません
> に変更したのですが表示されます。
> ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/12 10:18
Aのソースにすると最初に移動したページにも画像が見えません。
現在はBにしています。
下記はAです。
お手数ですが調査願います。


<!-- ポッ………(省略)………
  • 返信者:非公開
  • 2019/10/12 13:12
ECマスターズの塚本です。

いただいたご質問ですがお調べしまして
担当より回答させていただきます。

ご案内できるのが14日になると思いますが、
………(省略)………
  • 返信者:非公開
  • 2019/10/14 18:39
ECマスターズの伊藤です。

> Aのソースにすると最初に移動したページにも画像が見えません。

テストなどでも、一度closeをクリックしますと
再………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/14 18:56
「まずは、シークレットモードでのご確認をお願いいたします。」
どうすればよいのかわかりません。
Aソースに変更しました。
お手数ですが、携帯に連絡いただけ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/14 19:00
「よろしければ、事務局でも
Aのソースで表示されているか、確認いたしますので
ご希望の場合は、ご対応頂いたページを
ご連絡くださいませ。」
スマホ全ペー………(省略)………
  • 返信者:非公開
  • 2019/10/14 19:16
ECマスターズの伊藤です。
※行き違いとなってしまったため
電話番号の掲載された投稿を削除させていただきました。

> お手数ですが、携帯に連絡いただけ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/15 08:31
シークレットモードで確認出来ました。
ありがとうございました。………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/24 13:48
再度の質問です。

現在ポップアップバナー
スマートフォン A
更新・別ページ遷移時のバナー表示:表示されません
を採用していますが、
<a hre………(省略)………
  • 返信者:非公開
  • 2019/10/24 15:39
ECマスターズの伊藤です。

> 理想はクーポンURLが変わった時には1度見えて2度目には見えない仕様だと最高なのですが。。。

var k = 'mo………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/24 15:56
ありがとうございました。
早速修正して確認しました。
最高です!!!………(省略)………