モダールウィンドウがうまくいかない

Question

いつも丁寧なご指導をありがとうございます。

デザインレシピに従いましてモダールウィンドウの設置を試みているのですが、
うまくいきません。

入力したタグは、スマホ・PCそれぞれに以下のとおりです。

【スマホ】：全く表示されません。









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); });
});


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; /*画像の横幅*/
height:300px; /*画像の縦幅*/
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; /*画像の横幅*/
height:300px; /*画像の縦幅*/
}




【PC】：中央に表示されず、左端に寄ってしまいます。







p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal + label {
width: 100%;
height: 120%;
position: fixed;
top: 0;
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; /*画像の横幅*/
height:300px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 0;
}
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; /*画像の横幅*/
height:300px; /*画像の縦幅*/
}

Answer

ECマスターズの伊藤です。

> デザインレシピに従いましてモダールウィンドウの設置を試みているのですが、
> うまくいきません。
> 
> 入力したタグは、スマホ・PCそれぞれに以下のとおりです。


> 【スマホ】：全く表示されません。

ご登録頂いている

＝＝＝＝＝
スマートフォン A
更新・別ページ遷移時のバナー表示：表示されません
アプリ版表示：非対応
＝＝＝＝＝

は、一度 close をクリックすると、
再表示されなくなります。

そのため、履歴等を保存しない
シークレットモードでのご確認を
お願いいたします。

シークレットモードの起動方法は、下記URLをご参照ください。
https://bit.ly/2Uup9r7


> 【PC】：中央に表示されず、左端に寄ってしまいます。

頂いたタグを、テストサイトにて
貼り付けを行ったところ
中央に表示されました。

恐れ入りますが、実際のページを
確認させていただきたいと思いますので
URLを頂戴できますでしょうか。

Answer

伊藤様

ご回答ありがとうございます。

PCの方はうまくいきました。
（理由はわかりませんが、昨日は同じタグで同じ場所に入れても左端に表示されていたのですが、今日は中央に表示されました。）

スマホの方は、シークレットモードにしてもみることができません。
今タグは入れたままにしているので、伊藤さんの方でみてみていただけますか。

Answer

ECマスターズの伊藤です。

> PCの方はうまくいきました。
> （理由はわかりませんが、昨日は同じタグで同じ場所に入れても左端に表示されていたのですが、今日は中央に表示されました。）

PCの方は、ご希望どおりに表示されるように
なったようで、良かったです。

> スマホの方は、シークレットモードにしてもみることができません。
> 今タグは入れたままにしているので、伊藤さんの方でみてみていただけますか。

商品番号 dc-dx002-last を
拝見したところ、タグの記述が見当たりませんでした。

特定の商品にのみ、タグを適用頂いているようであれば
商品番号を頂戴できますでしょうか。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

お世話になっております。

トップ説明文(1)に入れており、各商品ページへの貼り付けではありません。
貼り付け場所間違えておりますか？

Answer

ECマスターズの伊藤です。

> トップ説明文(1)に入れており、各商品ページへの貼り付けではありません。
> 貼り付け場所間違えておりますか？

貼り付け位置のご連絡、ありがとうございます。

トップ説明文(1)ですが、トップページを
GOLDで作成していただいているため
こちらの登録内容は反映されません。

トップページにて、モーダルを表示さたい場合は
htmlに直接記述していただきますよう
お願いいたします。

Answer

伊藤様

ご返信ありがとうございます。

表示させたいのでは、スマホトップページではなく、
各商品説明文です。

トップ説明文ではなく、カテゴリーページ共通説明文と商品ページ共通説明文に登録してみましたが、やはり表示されませんね。

結局、スマホ商品説明文に入れないとダメということですか。

Answer

ECマスターズの伊藤です。

> トップ説明文ではなく、カテゴリーページ共通説明文と商品ページ共通説明文に登録してみましたが、やはり表示されませんね。

カテゴリーページ共通説明文、商品ページ共通説明文に
ご登録いただければ、表示されるようになっております。

現在、タグを入れていただいていないようですので
私の方でも、確認することができないのですが
ご確認は、シークレットモードでしていただきましたでしょうか。

先にご連絡しておりましたとおり
一度Closeしてしまうと、表示されない
仕様となっているため、確認の際は、
シークレットモードでご確認をお願いいたします。

タグを入れたままにしていただければ、
表示されているかどうか、
されていない場合は、どこに原因があるか
確認いたしますので、よろしければ
ご対応後、ご連絡くださいませ。

Answer

伊藤様

お世話になっております。
感謝祭セールが終わりましたので、ハロウィンバナーで明日以降また試してみますね。

解決済みまで少しだけお待ちください。

Answer

ECマスターズの伊藤です。

> 感謝祭セールが終わりましたので、ハロウィンバナーで明日以降また試してみますね。

かしこまりました。
ご連絡お待ちしております。

Answer

伊藤様

問題なくスマホにも貼り付けができました。
やはりシークレットモードかどうかの問題でした。
お騒がせいたしました。
ありがとうございました！