jQueryのモーダルウィンドウについてご質問します。
HTML
1 <div class="main-activiy"> 2 <h1>My Activity</h1> 3 <div class="main-Photo"> 4 <img src="https://d1f5hsy4d47upe.cloudfront.net/41/417a3ddc820c6bdb618b97733322d44e_t.jpeg" class="photo"> 5 <img src="https://d3cmdai71kklhc.cloudfront.net/post_watermark_sp_320/marketplace/46663/mp_20180723-082554144_d4abn.jpg" class="photo"> 6 <img src="https://d1f5hsy4d47upe.cloudfront.net/0f/0f4e17353040c132cbf571dc559e3b0c_t.jpeg" class="photo"> 7 <p class="photo-font">作品を日々生み出して、活動しています。 8 <br> 9 現在は小説・プログラミング・歌、3つの軸があります。これからもどんどん作品を増やしていきます。 10 <br> 11 画像をクリックしていただくと、詳細なことが詳しく書かれています。 12 </div> 13 </div> 14 15<!--モーダル--> 16 <div id="modal-pezi"> 17 <!--モーダル1--> 18 <div id="modal-widow1"> 19 <div class="modal-font1"> 20 <i class="fas fa-times" id="aikon"></i> 21 <h3 style="margin-left: 70%;font-size: 25px; font-family: serif;">小説</h3> 22 <img src="https://d1f5hsy4d47upe.cloudfront.net/41/417a3ddc820c6bdb618b97733322d44e_t.jpeg"> 23 <p style=" text-align: center;position: relative; 24 left: 1%; 25 bottom: 10px; 26 line-height: 110px; 27 font-family: serif; 28 display: inline-block;">現在小説を毎日書き始めて、1年が経過しました。 29 <br> 30 体調が悪くても休むことはせず、一心不乱に書いてきました。 31 <br> 32 色んな賞に応募したりしていましたが、イチから環境を変えるために最近はネットで投稿しています 33 <br> 34 小説家になろうにて、絶賛連載中。 35 <a class="url-bok" href=" https://ncode.syosetu.com/n6451fr/" target="_blank"> https://ncode.syosetu.com/n6451fr/</a> 36 </p> 37 </div> 38 </div> 39 <!--モーダル2--> 40 <div id="modal-widow2"> 41 <div class="modal-font2"> 42 <i class="fas fa-times" id="aikon"></i> 43 <h3 style="margin-left: 58%;font-size: 25px; font-family: serif;">プログラミング</h3> 44 <img src="https://d3cmdai71kklhc.cloudfront.net/post_watermark_sp_320/marketplace/46663/mp_20180723-082554144_d4abn.jpg"style="position: relative;left: 85px;width: 30%;"> 45 <p style="text-align: center;position: relative; 46 left: 10%; 47 bottom: 10px; 48 line-height: 140px; 49 font-family: serif; 50 display: inline-block;">プログラミングを学んで半年が経ちました。 51 <br> 52 webサイトを主に作っていて、HTML CSS jQueryで構築しています。 53 <br> 54 現在はPHPを学習中で、もっと幅を広げて色んな機能を追加できるように日々、勉強中です。 55 </p> 56 </div> 57 </div> 58 <!--モーダル3--> 59 <div id="modal-widow3"> 60 <div class="modal-font3"> 61 <i class="fas fa-times" id="aikon"></i> 62 <h3 style="margin-left: 67%;font-size: 25px; font-family: serif;">歌</h3> 63 <img src="https://d1f5hsy4d47upe.cloudfront.net/0f/0f4e17353040c132cbf571dc559e3b0c_t.jpeg"> 64 <p style="text-align: center;position: relative; 65 bottom: 10px; 66 line-height: 140px; 67 font-family: serif; 68 display: inline-block;">小さい頃から、歌が好きでした。 69 <br> 70 22歳になってから、また歌いたいと思い、現在はオーディションに行ったり、ネットに歌を投稿しています。 71 <br> 72 nanaというアプリで投稿しているので、ぜひ聞いてみてください。 73 <a class="url-bok" href="https://nana-music.com/users/1690542" target="_blank">https://nana-music.com/users/1690542</a> 74 </p> 75 </div> 76 </div> 77</div>
css
1/*モーダル部分*/ 2 3#modal-pezi{ 4 height: 330%; 5 position: relative; 6 bottom: 156%; 7 background-color: rgb(128,128,128,0.3); 8 z-index: 100; 9 display: none; 10} 11 12#modal-widow1{ 13 position: fixed; 14 top: 20%; 15 left: 10%; 16 height: 55%; 17 width: 70%; 18 background-color: #EEEEEE; 19 border-radius: 10px; 20 display: none; 21} 22 23.url-bok{ 24 display: inline-block; 25 line-height: 25px; 26 color: blue; 27} 28 29#aikon{ 30 position: relative; 31 left: 98%; 32 top: 5px; 33 font-size: 20px; 34 width: 15px; 35 cursor: pointer; 36} 37 38#modal-widow2{ 39 position: fixed; 40 top: 20%; 41 left: 10%; 42 height: 55%; 43 width: 70%; 44 background-color: #EEEEEE; 45 border-radius: 10px; 46 display: none; 47} 48 49#modal-widow3{ 50 position: fixed; 51 top: 20%; 52 left: 10%; 53 height: 55%; 54 width: 70%; 55 background-color: #EEEEEE; 56 border-radius: 10px; 57 display: none; 58} 59
jQuery
1$(function(){ 2 $(".photo").click(function(){ 3 $("#modal-pezi").css("display","block"); 4 }); 5}); 6
現在モーダルウィンドウを3つ作成しています。
それぞれ、画像を押すとその画像に適した文章を表示させたいと考えています。
まず、画像にclassをつけてjQueryでclickを適用させました。
そこから、モーダルを表示させる画面(画面全体が薄くなるページ)を表示させたかったので、modal-peziにつけているdisplay:noneをblockに変えて表示させることはできました。
しかし、モーダルを表示させる画面が出来ても、ウィンドウを表示させることはできません。
それにウインドウが複数あるので、modal-widow毎につけているdisplay: none;を外したとしても、画像にあった文章を表示させることも出来ません。
この場合、どのようなコードで複数毎に表示させる事ができるのでしょうか?
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/19 12:29
2019/08/19 12:54