• 文字サイズ
解決済

デザインレシピ(ポップアップバナー表示)

  • 相談者:非公開
  • 2019/09/29 16:56
いつもお世話になります

PC表示はできたのですが、スマートフォンAパターンをスマホ商品ページ共通説明文に挿入しましたが表示されないんです

※クーポンurl、画像はpc共通の正方形280x280です。

また、バナークリックよりページが離脱してしまう(pc)ので
別ウィンドウにて開く target="_blank"は、可能でしょうか?

よろしくお願いします



<input type="checkbox" name="modal" id="modal" ="" checked>
<label id="modallabel" for="modal" ="">
<div ="">
<a href="https://coupon.rakuten.co.jp/getCoupon?getkey=SUFUTi1XUTRFLUFZUlotN1BORA--&rt=">
<img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/05901484/1bn882.jpg">
</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: 300px; /*280*/
height:330px; /*280*/
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: 300px; /*280*/
height:330px; /*280*/
}
</style ="">
キーワード:ポップアップバナー
投稿内容について報告する




  • 返信者:非公開
  • 2019/09/29 17:33
なんつれさん

ECマスターズの小野です。

いただいたご質問ですが、
明日、担当より回答させていただきます。

少々お待ちくださいませ。………(省略)………
  • 返信者:非公開
  • 2019/09/30 15:56
ECマスターズの伊藤です。

> PC表示はできたのですが、スマートフォンAパターンをスマホ商品ページ共通説明文に挿入しましたが表示されないんです

私………(省略)………
  • 返信者:非公開(質問者)
  • 2019/09/30 21:46
伊藤さま

ありがとうございます。

target="_brank"も、うまくできクローム拡張機能iphone表示確認できました(^^)

ただ、自………(省略)………
  • 返信者:非公開
  • 2019/10/01 14:41
ECマスターズの伊藤です。

> target="_brank"も、うまくできクローム拡張機能iphone表示確認できました(^^)

ポップアップバナ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/01 16:01
伊藤さん

なるほど~
スマホ、検索窓に rakutenといれ見ましたら、ポップアップ表示されてました
勉強になりました。ありがとうございます………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/04 11:58
お世話になります。

些細な事なのですが、スマホ表示バナー外枠に、グレ黒い枠線みたいなものが表示されます。
これは、仕様上仕方ないのでしょうか?
また、………(省略)………
  • 返信者:非公開
  • 2019/12/04 18:06
ECマスターズの伊藤です。

> 些細な事なのですが、スマホ表示バナー外枠に、グレ黒い枠線みたいなものが表示されます。
> これは、仕様上仕方ないのでしょ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/05 11:45
お世話になります。
デザインレシピより商品ページ共通説明文へ挿入したところ
今後は、ポップアップではなく、画面最下段に表示されるようになりました。(添付) ………(省略)………
  • 返信者:非公開
  • 2019/12/05 15:20
ECマスターズの伊藤です。

> デザインレシピより商品ページ共通説明文へ挿入したところ
> 今後は、ポップアップではなく、画面最下段に表示されるようにな………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/05 21:39
伊藤さん

お忙しい中、ご丁寧にありがとうございました。
はじめから、やり直し、うまくできました。………(省略)………