スマホでのモーダルウィンドウを中央寄せにしたい

Question

お世話になっております。

11月初めよりスマホでモーダルウィンドウを出しています。

一度、以下のページをスマホからご確認頂きたいのですが、
https://item.rakuten.co.jp/mushinai/proboardlb100/
が若干、左寄りになっています。

JAVASCRIPTやCSSを作ってくれた方からは、調整するのは
難しいと言われましたが、できれば中央寄せしたいです。

モデルとなるのはシードコムスさんです。

まずは実現可能かどうかをお教えください。

よろしくお願いします。

Answer

ECマスターズの伊藤です。

> JAVASCRIPTやCSSを作ってくれた方からは、調整するのは
> 難しいと言われましたが、できれば中央寄せしたいです。

@media (max-width: 799px) {
.layer_board {

の

left: 30%; 
transform: translate(-30%, -50%);

にて、位置の指定をしておりましたので
下記の通り、修正していただきますと
中央に表示してただくことができます。

なお、位置の指定を変更しますと
画像のサイズが、縮小されてしまいますので
画像サイズの指定も追加をお願いいたします。

> まずは実現可能かどうかをお教えください。

とのことですが、下記の通り修正していただきますと
中央に表示される様になると思いますので
お試しくださいませ。

@media (max-width: 799px) {
.layer_board {
display: none;
position: fixed;
top: 50%;
left: 50%; /* 修正 */
transform: translate(-50%, -50%); /* 修正 */
text-align: center;
vertical-align: middle;
z-index: 100000;
max-width: 90%; /* 追加 画像サイズ */
width: 300px; /* 追加 画像サイズ */
}
}

Answer

伊藤さん、ありがとうございます。

早速CSSを修正し、アップしました。

かつ商品ページ共通説明文もlayerBoard.cssの
後ろの?00Xの数字を進め、キャッシュをクリア
しました。

まだ表示がそのままです。。。

何か間違えたでしょうか？

ご指導ください。

Answer

ECマスターズの伊藤です。

> かつ商品ページ共通説明文もlayerBoard.cssの
> 後ろの?00Xの数字を進め、キャッシュをクリア
> しました。

ご対応ありがとうございます。

https://www.rakuten.ne.jp/gold/mushinai/css/layerBoard.css?005

拝見いたしましたが、更新がされていないようです。

ファイルサイズに変化がないと
更新されない場合がございますので
末尾に半角スペースを数個追加していただき
保存後、再度アップロードをお試しくださいませ。

また、上記URLにアクセスし
ファイルが更新されているかも
合わせてご確認をお願いいたします。

Answer

伊藤さん

大変失礼いたしました。

再度、変更し、無事に変更されました。

ありがとうございました。

Answer

伊藤さん、お世話になっております。

解決にしたのに追加質問です。

現在、スマホに掲載しているモーダルウィンドウを
PCでも表示できるようにしたいです。

このソースは楽天仲間からもらったもので、どう
変更すればいいか分かりません。

動作としては、画面を開いて数秒後に表示され、
ある程度経つと消え、その後は同じドメイン内だと
1分間は再度表示されないように制御されています。

これと同じ動作をPCでも実現可能でしょうか？

必要であればソースを提供しますので、よろしく
お願いします。

Answer

ECマスターズの伊藤です。

> 現在、スマホに掲載しているモーダルウィンドウを
> PCでも表示できるようにしたいです。

楽天のPC版では、JavaScriptの使用が
許可されておらず、

こちらの動作に、JavaScriptが使用されているため
PC版ではご対応いただくことができません。

楽天の仕様となりますので、
ご理解いただきますよう、お願いいたします。

Answer

伊藤さん、ありがとうございます。

できないとのこと、承知しました。

実はこれに先駆けて、デザインレシピのモーダルウィンドウを表示する方法でやってみました。

たまたまかもしれませんが、設置後すぐに100円OFFのモーダルクーポンを利用されて
21,500円の注文が入りました。

それも2,000円OFFのクーポンもあるのにです。

まあ、ラッキーパンチかもしれませんが、お買い物マラソン中は設置して、様子を見ます。

ありがとうございました。