質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Q&A

解決済

1回答

2126閲覧

cssのみでアクセス時にモーダルを表示させたい(inputタグ使用不可)

poppoko

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

0グッド

0クリップ

投稿2021/02/21 22:14

楽天ショップ内での実装を試みており、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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/21 22:53

基本displayを切り替えてるだけなので「技術的には可能」。初期値を「表示」にするだけ。 でも、様々な制限がある楽天ショップ内で、CSS対応できてるんですか? 「クリック時に」の実装でもできてますか?
poppoko

2021/02/23 03:19

ご指摘の通り、クリック時に飛んだ先が「アクセスに制限がかかっています」との表示で実装できませんでした。
guest

回答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}

CodePenサンプル

投稿2021/02/22 01:50

編集2021/02/22 03:01
hatena19

総合スコア34022

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

poppoko

2021/02/23 03:21

参考コードありがとうございます。 ローカルではまさにこちらで実装できたのですが、楽天ショップの仕様上の問題で、閉じるボタンを押すと「アクセスに制限がかかっています」との表示で実装できませんでした。 やはり制限が多すぎて難しそうです。 しかしtarget属性に関しては理解を深めることができました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問