Q&A
モーダルは何の仕組み（プラグイン、フレームワーク）のものを採用されていますか？
二番目のModalでは”状況：デリンジャー護身用に持っている”とはでずに、一番目の画像付きのデリンジャーの解説が出てしまいます。
IDが重複していると考えていますが、どうやって分けてあげればいいのかわかりません
<html> <head> <link rel="stylesheet" type="text/css" media="screen" href="styles/main.css" /> </head> <body> Dillingers <label for="modal-check"><sup>(注1)</sup></label><input type="checkbox" id="modal-check"><span class="modal"><label for="modal-check">閉じる</label><br /><br /> <p style="font-family:’Helvetica Bold’,游明朝,'Yu Mincho'; text-align:center;">Derringer (デリンジャー )</p> <center><img src="images/phild.png" width="150" height="100" alt="phildelphiadillinger"></center> 解説：写真はフィラデルフィア・デリンジャー。人間の拳程度の大きさでポケットにも入る。護身拳銃や暗殺用として使われていた。リンカーン暗殺に使われた銃もデリンジャー、パーカッション式のデリンジャー。</span> <br /> をカジノで拾った。 俺は奴の用心棒<label for="modal-check" id="youjinbou"><sup>(注2)</sup></label><input type="checkbox" id="modal-check"><span class="modal" id="2"><label for="modal-check">閉じる</label><br /><br /> 状況：デリンジャー護身用に持っている。</span><br/> 今からあいつの元に行く。 </body> </html>
CSS .modal { display: none; width: 60vw; height: 60vw; background-color: #FFF; position: fixed; top: -10px; left: -10px; right: -10px; bottom: -10px; margin: auto; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8); } #modal-check { display: none; } #modal-check:checked + .modal { display: block; } .modal .modal-check:checked + .modal-body { animation: fadeout .2s 1 forwards, hide .1s .2s 1 forwards; } .modal .modal-check:checked + .modal-body .modal-window { animation: zoomout .2s 1 forwards; }
参考までに今表示されている内容は下記です。
ModalはネットでまるまるいただいたものでCSSで動く仕組みになっています。
回答1件
0
ベストアンサー
labelでしている以上、idでしか反応しませんので、別名定義して増やすしかないですね。
css
1#modal-check01 2,#modal-check02 3{ 4 display: none; 5} 6#modal-check01:checked + .modal 7,#modal-check02:checked + .modal 8{ 9 display: block; 10}
html
1 Dillingers <label for="modal-check01"><sup>(注1)</sup></label><input type="checkbox" id="modal-check01"><span class="modal"><label for="modal-check01">閉じる</label><br /><br /> 2<p style="font-family:’Helvetica Bold’,游明朝,'Yu Mincho'; text-align:center;">Derringer (デリンジャー )</p> 3<center><img src="1.png" width="150" height="100" alt="phildelphiadillinger"></center> 4 5解説：写真はフィラデルフィア・デリンジャー。人間の拳程度の大きさでポケットにも入る。護身拳銃や暗殺用として使われていた。リンカーン暗殺に使われた銃もデリンジャー、パーカッション式のデリンジャー。</span> 6<br /> 7 8をカジノで拾った。 9 10俺は奴の用心棒<label for="modal-check02" id="youjinbou"><sup>(注2)</sup></label><input type="checkbox" id="modal-check02"><span class="modal" id="2"><label for="modal-check02">閉じる</label><br /><br /> 11 12状況：デリンジャー護身用に持っている。</span><br/> 13 14今からあいつの元に行く。
checkboxのidとlabelのforの値を合わせれば反応するので、
その組の分だけ名前つけて増やしていきます。
投稿2019/04/17 06:35
編集2019/04/17 06:36総合スコア80850
別名定義して毎回増やしていきます
ありがとうございました！
JavaScript用いるとcssの記述増やすことなくできるように作り込みは可能です。
ただ、モーダルは本来、画面操作を一旦止める役割があるためあまり1画面で多用すべきではないようにも思います。
補足説明を出すだけでしたらツールチップの方が適役かもしれません
ご検討ください
補足ありがとうございます。
ツールチップを調べてみましたが、画像も表現したいです。もちろんソースは記入します。
まあ画像も表示できるように作ればいいだけの話なので。
どうやって・・・作れるんですか、できればツールチップにしたいですが。。。
参考になる方法をご教授いただけないでしょうか？？
あ、でもスマホの場合、ツールチップは難しいですね。
cssフレームワークで実現されてるので「可能」です。
https://materializecss.com/tooltips.html#!
まあ、これはdata属性使っているので画像はおろかhtmlも難しいように見えますが、そこは工夫次第です。
表示時に置換すれば柔軟に対応できると思いますよ。
あでも要件かわるので、もう少し頑張ってみて、それでもできなければ新たに質問立ててください
リリックをウェブで公開するに向けて、たくさんの脚注を書く節に儲けたいので、、
ツールチップの使用の方が適していると思いますが。。。
InitiallizationとMethodを読みましたが、どのようして書いたらいいものか.
新しく . JS ファイルを作る必要がありましたでしょうか。。
また画像を表示するとなると、"I am a tool tip" 部分に工夫すればいいと考えたのですが、
ちょっと頭が回らなく難しいです。
まあそこは別件としてやってみてください。
あまりここのコメントで長々とやりとりしても進まないと思いますので。なんならモーダルをもう少し注釈っぽくだすように工夫したりJavaScriptに切り替えたり、といったほうが建設的かもしれません。
モーダルもツールチップも確かに本来の意味はあるものの見せ方の表現方法のひとつに過ぎません
わかりました。なんとかできそうです。
こちらでうまく説明されているものがありました。ご参考までに↓
http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/
承知致しました。ここのコメントはクローズとします。
ヒントになったようで何よりです
あなたの回答
tips
プレビュー
