Q&A
基本displayを切り替えてるだけなので「技術的には可能」。初期値を「表示」にするだけ。
でも、様々な制限がある楽天ショップ内で、CSS対応できてるんですか？
「クリック時に」の実装でもできてますか？
楽天ショップ内での実装を試みており、jQuery、JavaScript、さらに<input>タグの使用が禁止というルールになっております。
サイトにアクセスしたときにモーダルを表示させ、閉じるボタンをクリックときにモーダルを非表示にしたいと思っています。
こちらのサイトが非常に参考にはなったのですが、ある画像をクリックしたときにモーダル表示という仕様になっています。アクセスしたときに自動で表示させることは可能でしょうか？？コードはこちらのサイトから拝借しております。
https://ecmemo.net/modal-window#toc7
どうぞよろしくお願いいたします。
HTML
1<a href="#modal-01"> 2 <img src="https://picsum.photos/id/1080/140"> 3</a> 4<div class="modal-wrapper" id="modal-01"> 5 <a href="#!" class="modal-overlay"></a> 6 <div class="modal-window"> 7 <div class="modal-content"> 8 <img src="https://picsum.photos/id/1080/600" width="100%"> 9 </div> 10 <a href="#!" class="modal-close">×</a> 11 </div> 12</div>
css
1 2.modal-wrapper { 3 z-index: 999; 4 position: fixed; 5 top: 0; 6 right: 0; 7 bottom: 0; 8 left: 0; 9 padding: 60px 10px; 10 text-align: center 11} 12 13.modal-wrapper:not(:target) { 14 opacity: 0; 15 visibility: hidden; 16 transition: opacity .3s, visibility .3s; 17} 18 19.modal-wrapper:target { 20 opacity: 1; 21 visibility: visible; 22 transition: opacity .4s, visibility .4s; 23} 24 25.modal-wrapper::after { 26 display: inline-block; 27 height: 100%; 28 margin-left: -.05em; 29 vertical-align: middle; 30 content: "" 31} 32 33.modal-wrapper .modal-window { 34 box-sizing: border-box; 35 display: inline-block; 36 z-index: 20; 37 position: relative; 38 width: 70%; 39 max-width: 600px; 40 padding: 30px 30px 15px; 41 border-radius: 2px; 42 background: #fff; 43 box-shadow: 0 0 30px rgba(0, 0, 0, .6); 44 vertical-align: middle 45} 46 47.modal-wrapper .modal-window .modal-content { 48 max-height: 80vh; 49 overflow-y: auto; 50} 51 52.modal-overlay { 53 z-index: 10; 54 position: absolute; 55 top: 0; 56 right: 0; 57 bottom: 0; 58 left: 0; 59 background: rgba(0, 0, 0, .8) 60} 61 62.modal-wrapper .modal-close { 63 z-index: 20; 64 position: absolute; 65 top: 0; 66 right: 0; 67 width: 35px; 68 color: #95979c !important; 69 font-size: 20px; 70 font-weight: 700; 71 line-height: 35px; 72 text-align: center; 73 text-decoration: none; 74 text-indent: 0 75}
回答1件
0
ベストアンサー
下記でどうでしょうか。
html
1<a href="#" id="img1"> 2 <img src="https://picsum.photos/id/1080/140"> 3</a> 4<div class="modal-wrapper"> 5 <a href="#img1" class="modal-overlay"></a> 6 <div class="modal-window"> 7 <div class="modal-content"> 8 <img src="https://picsum.photos/id/1080/600" width="100%"> 9 </div> 10 <a href="#img1" class="modal-close">×</a> 11 </div> 12</div>
css
1.modal-wrapper { 2 z-index: 999; 3 position: fixed; 4 top: 0; 5 right: 0; 6 bottom: 0; 7 left: 0; 8 padding: 60px 10px; 9 text-align: center; 10} 11#img1:not(:target) + .modal-wrapper { 12 opacity: 1; 13 visibility: visible; 14 transition: opacity .4s, visibility .4s; 15} 16#img1:target + .modal-wrapper { 17 opacity: 0; 18 visibility: hidden; 19 transition: opacity .3s, visibility .3s; 20} 21.modal-wrapper::after { 22 display: inline-block; 23 height: 100%; 24 margin-left: -.05em; 25 vertical-align: middle; 26 content: "" 27} 28.modal-wrapper .modal-window { 29 box-sizing: border-box; 30 display: inline-block; 31 z-index: 20; 32 position: relative; 33 width: 70%; 34 max-width: 600px; 35 padding: 30px 30px 15px; 36 border-radius: 2px; 37 background: #fff; 38 box-shadow: 0 0 30px rgba(0, 0, 0, .6); 39 vertical-align: middle 40} 41.modal-wrapper .modal-window .modal-content { 42 max-height: 80vh; 43 overflow-y: auto; 44} 45.modal-overlay { 46 z-index: 10; 47 position: absolute; 48 top: 0; 49 right: 0; 50 bottom: 0; 51 left: 0; 52 background: rgba(0, 0, 0, .8) 53} 54.modal-wrapper .modal-close { 55 z-index: 20; 56 position: absolute; 57 top: 0; 58 right: 0; 59 width: 35px; 60 color: #95979c !important; 61 font-size: 20px; 62 font-weight: 700; 63 line-height: 35px; 64 text-align: center; 65 text-decoration: none; 66 text-indent: 0 67}
投稿2021/02/22 01:50
編集2021/02/22 03:01
総合スコア34075
参考コードありがとうございます。
ローカルではまさにこちらで実装できたのですが、楽天ショップの仕様上の問題で、閉じるボタンを押すと「アクセスに制限がかかっています」との表示で実装できませんでした。
やはり制限が多すぎて難しそうです。
しかしtarget属性に関しては理解を深めることができました。ありがとうございます。
あなたの回答
tips
プレビュー
