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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

822閲覧

jQueryでモーダルウィンドウを複数に分けて表示したい

hiiro46

総合スコア21

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/08/18 12:58

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;を外したとしても、画像にあった文章を表示させることも出来ません。
この場合、どのようなコードで複数毎に表示させる事ができるのでしょうか?
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

#modal-peziはあくまで外の要素だからだと思います。
本体のmodal自体はdisplay:none;のままです。

「画像とモーダルを紐づけたい」のであれば、data属性を使うと良いのでは。

html

1 <img src="https://d1f5hsy4d47upe.cloudfront.net/41/417a3ddc820c6bdb618b97733322d44e_t.jpeg" class="photo" data-modal_id="1"> 2 <img src="https://d3cmdai71kklhc.cloudfront.net/post_watermark_sp_320/marketplace/46663/mp_20180723-082554144_d4abn.jpg" class="photo" data-modal_id="1"> 3 <img src="https://d1f5hsy4d47upe.cloudfront.net/0f/0f4e17353040c132cbf571dc559e3b0c_t.jpeg" class="photo" data-modal_id="1">

あと前のを残さないために「modal」クラスをそれぞれに付与

html

1 <div id="modal-widow1" class="modal"> 2 3 <div id="modal-widow2" class="modal"> 4 5 <div id="modal-widow3" class="modal"> 6

あとはモーダル表示

js

1$(function(){ 2 $('.photo').on('click',function(){ 3 $('.modal').hide(); 4 modal_id = $(this).data('modal_id'); 5 $('#modal-pezi').show(); 6 $('#modal-widow'+modal_id).show(); 7 }); 8});

hide()
show()

ただ、#aikonがID重複していますし、モーダルのデザインも同じなのであれば、モーダル用のHTMLは1個でいいのではとも思います。データは配列に持っておくとかですね。
(というかそこまで難しい単語でもないのでローマ字表記ではなくiconで良いのでは・・。#url-bokbokじゃなくてbookかな)

「今後増やしていく」のであればHTMLが増えていくのはあまりよろしくないですし、
もし文章に書かれている「PHP」を学習していくのであればそれぞれデータベースに持っても良いと思います。

直書きにしているところを外に

css

1 2.modal { 3 position: fixed; 4 top: 20%; 5 left: 10%; 6 height: 55%; 7 width: 70%; 8 background-color: #EEEEEE; 9 border-radius: 10px; 10} 11 12.modal_title { 13 margin-left: 70%; 14 font-size: 25px; 15 font-family: serif; 16} 17 18.modal_contents { 19 text-align: center; 20 position: relative; 21 left: 1%; 22 bottom: 10px; 23 line-height: 110px; 24 font-family: serif; 25 display: inline-block; 26}

最低限必要なもの以外は削除

html

1 <div class="main-activiy"> 2 <h1>My Activity</h1> 3 <div class="main-Photo"> 4 <p class="photo-font"> 5 作品を日々生み出して、活動しています。 <br> 6 現在は小説・プログラミング・歌、3つの軸があります。これからもどんどん作品を増やしていきます。 <br> 7 画像をクリックしていただくと、詳細なことが詳しく書かれています。 8 </div> 9 </div> 10 11 <!--モーダル--> 12 <div id="modal-pezi"> 13 <!--モーダル1--> 14 <div class="modal"> 15 <div class="modal-font"> 16 <i class="fas fa-times" id="aikon"></i> 17 <h3 class="modal_title"></h3> 18 <img src="" class="modal_image"> 19 <p class="modal_contents"> 20 </div> 21 </div> 22 </div>

データ部分を配列に

js

1const datalist = { 2 1:{ 3 title:'小説', 4 image_url:'https://d1f5hsy4d47upe.cloudfront.net/41/417a3ddc820c6bdb618b97733322d44e_t.jpeg', 5 contents:'現在小説を毎日書き始めて、1年が経過しました。<br>体調が悪くても休むことはせず、一心不乱に書いてきました。<br>色んな賞に応募したりしていましたが、イチから環境を変えるために最近はネットで投稿しています<br>小説家になろうにて、絶賛連載中。', 6 url:'https://ncode.syosetu.com/n6451fr/' 7 }, 8 2:{ 9 title:'プログラミング', 10 image_url:'https://d3cmdai71kklhc.cloudfront.net/post_watermark_sp_320/marketplace/46663/mp_20180723-082554144_d4abn.jpg', 11 contents:'プログラミングを学んで半年が経ちました。<br>webサイトを主に作っていて、HTML CSS jQueryで構築しています。<br>現在はPHPを学習中で、もっと幅を広げて色んな機能を追加できるように日々、勉強中です。', 12 url:false 13 }, 14 3:{ 15 title:'歌', 16 image_url:'https://d1f5hsy4d47upe.cloudfront.net/0f/0f4e17353040c132cbf571dc559e3b0c_t.jpeg', 17 contents:'小さい頃から、歌が好きでした。<br>22歳になってから、また歌いたいと思い、現在はオーディションに行ったり、ネットに歌を投稿しています。<br>nanaというアプリで投稿しているので、ぜひ聞いてみてください。', 18 url:'https://nana-music.com/users/1690542' 19 }, 20}; 21

処理本本編

js

1$(function(){ 2 //画像の表示 3 $.each(datalist, function(index, data){ 4 let img = $('<img>',{ 5 src:data.image_url, 6 class:'photo', 7 'data-modal_id':index, 8 }); 9 $('.main-Photo').prepend(img); 10 }); 11 12 //各画像クリックでモーダル表示 13 $(document).on('click','.photo',function(){ 14 $('#modal-pezi').hide(); 15 modal_init(); 16 modal_set($(this).data('modal_id')); 17 $('#modal-pezi').show(); 18 }); 19}); 20function modal_init(){ 21 $('#modal-pezi .modal .modal_title').html(''); 22 $('#modal-pezi .modal .modal_contents').html(''); 23} 24 25function modal_set(modal_id){ 26 const data = datalist[modal_id]; 27 $('#modal-pezi .modal .modal_title').html(data.title); 28 $('#modal-pezi .modal .modal_image').attr('src',data.image_url); 29 $('#modal-pezi .modal .modal_contents').html(data.contents); 30 if(data.url){ 31 let url = $('<a></a>',{ 32 class:'url-bok', 33 href:data.url, 34 target:'_blank', 35 text:data.url 36 }); 37 $('#modal-pezi .modal .modal_contents').append(url); 38 } 39}

レイアウト部分はほぼ度外視です。文章がモーダルからはみでているところは調整してください。
※aタグでhrefとすべきところがsrcになってたりは直してします。

もしモーダル別に画像のレイアウトいじりたいとかあるのでしたら適宜配列に設定を追加して個々に処理分けさせてください。

投稿2019/08/19 01:37

編集2019/08/19 01:42
m.ts10806

総合スコア80765

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

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

hiiro46

2019/08/19 12:29

ありがとうございます。 ぜひ、試してみます!
m.ts10806

2019/08/19 12:54

できれば実際に試して理解できてから解決済みにしていただきたく。 (動いたから終わりではコードで回答した意味がないので)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問