• 文字サイズ
解決済

モーダルウィンドウの設置方法について

  • 相談者:非公開
  • 2019/12/25 12:23
お世話になります。下のモーダルウィンドウをhttps://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/
のカテゴリにだけ出したいのですが、どこに入れればいいでしょうか?

<!--************************モーダルウィンドウ▼****************************-->

<input type="checkbox" name="modal" id="modal" ="">
<label for="modal" ="">
<div ="">
<a href="https://coupon.rakuten.co.jp/getCoupon?getkey=SVlKTi1DQkQyLUVUUFYtTURHVg--&rt=" target="_blank">
<img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/hatuuri-coupon10.gif">
</a>
</div ="">
</label ="">
<style>
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; /*画像の縦幅*/
}
</style>
投稿内容について報告する


  • 返信者:非公開
  • 2019/12/25 19:10
ECマスターズの伊藤です。

> 下のモーダルウィンドウをhttps://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/26 16:55
因みにヤフーの場合はどこに入れればいのでしょうか?………(省略)………
  • 返信者:非公開
  • 2019/12/26 18:53
ECマスターズの伊藤です。

> 因みにヤフーの場合はどこに入れればいのでしょうか?

ヤフーの場合は、スマホではCSSが
許可されていませんので
………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/27 22:38
下記をhttps://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html
の(HTML可)のところに入れたので………(省略)………
  • 返信者:非公開
  • 2019/12/29 09:59
ECマスターズの伊藤です。

> 下記をhttps://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/29 14:13
すみません、添付の画像のようにページ下部に表示されてしまうため消していました。

<登録箇所がページに表示されておりませんので、
表示される箇所に、ご登録………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/29 14:49
(HTML可)のところに入れますと下記のように文字化けしてしまいます

<link rel="stylesheet" href="https://shopp………(省略)………
  • 返信者:非公開
  • 2019/12/29 16:55
ECマスターズの伊藤です。

> (HTML可)のところに入れますと下記のように文字化けしてしまいます

改めて確認したところ

使用可能なHTML………(省略)………