Q&A
ありがとうございます！！できました。
しかし後ろの.modal-overlayの、後ろが半透明だったのが効かなくなってしまいました、、すみませんなぜなのでしょう、、
初心者です。
jQueryで、複数のモーダルウィンドウを設置したいのですが、すべて同じもの（1つ目の中身）が表示されてしまいます。
それぞれ合った中身のものを表示するにはどうしたらよろしいでしょうか。
（初心者のため、ネットでコピペで拾ってきたものをカスタマイズして使わせていただこうとしてます、、、）
↓ページの画像
jQuery
1$(function(){ 2 //オーバーレイとコンテンツの表示 3 $(".modal-open").click(function(){ 4 $(this).blur() ; //ボタンからフォーカスを外す 5 if($( ".modal-overlay")[0]) return false; //新たにオーバーレイが追加されるのを防ぐ 6 $("body").append('<div class="modal-overlay"></div>'); //オーバーレイ用のHTMLをbody内に追加 7 $(".modal-overlay").fadeIn("slow"); //オーバーレイの表示 8 $(".modal").fadeIn("slow"); //モーダルウインドウの表示 9 10 //モーダルウインドウの終了 11 $(".modal-overlay,.modal-close").unbind().click(function(){ 12 $( ".modal,.modal-overlay" ).fadeOut( "slow" , function(){ //閉じるボタンかオーバーレイ部分クリックでフェードアウト 13 $('.modal-overlay').remove(); //フェードアウト後、オーバーレイをHTMLから削除 14 }); 15 }); 16 }); 17});
HTML
1<section class="inner" id="works"> 2 <h2 class="heading-primary" date-subtitle="作品"> 3 works 4 </h2> 5 6 <div class="contents"> 7 <div class="work_inner"> 8 <img src="images/ーーーー.png" alt="制作物" class="work_img" /> 9 10 11 <div class="work_name"> 12 <p class="work_p"> 13 <a class="modal-open" href="#modal01"> 14 １つめのサイト 15 </a> 16 </p> 17 <p class="work_icon"> 18 WEBサイト 19 </p> 20 <div class="modal" id="mobal01"> 21 <div class="modal-cont"> 22 <!--モーダル内で表示するコンテンツ--> 23 24 1つ目の中身 25 <div class="btn-modal-close"><a class="modal-close">閉じる</a></div> 26 </div><!--mobal自体--> 27 28 </div><!--workname--> 29 </div><!--workinner--> 30 31 32 <div class="work_inner"> 33 <img src="images/ーーーー.jpg" alt="制作物" class="work_img" /> 34 35 <div class="work_name"> 36 <p class="work_p"> 37 <a class="modal-open" href="#modal02"> 38 2つ目のサイト 39 </a> 40 </p> 41 42 <p class="work_icon"> 43 WEBサイト 44 </p> 45 <div class="modal"> 46 <div class="modal-cont" id="modal02"> 47 <!--モーダル内で表示するコンテンツ--> 48 49 2つ目の中身 50 </div><!--worksinner--> 51 52 53 </div><!--mobal-cont--> 54 55 <div class="btn-modal-close"><a class="modal-close">閉じる</a></div> 56 </div><!--mobal自体--> 57 58 </div><!--workname--> 59 </div><!--workinner--> 60 61 <div class="work_inner"> 62 <img src="images/ーーーー.jpg" alt="制作物" class="work_img" /> 63 64 <div class="work_name"> 65 <p class="work_p"> 66 <a class="modal-open" href="#modal03"> 67 3つ目のサイト 68 </a> 69 </p> 70 71 <p class="work_icon"> 72 WEBサイト 73 </p> 74 <div class="modal" id="modal03"> 75 <div class="modal-cont"> 76 <!--モーダル内で表示するコンテンツ--> 77 3つ目の中身 78 79 80 81 82 <div class="btn-modal-close"><a class="modal-close">閉じる</a></div> 83 </div> 84 </div> 85 </div> 86 </div> 87 88 89
CSS
1/*モーダル*/ 2.modal{ 3 display: none; 4 position: fixed; /*画面から独立*/ 5 top: 50%; 6 left: 50%; 7 width: 90%; /*モーダル幅*/ 8 height: 80%; /*モーダル高さ*/ 9 transform: translate(-50%,-50%); 10 z-index: 2; 11 text-align: center; 12 background: #fff; 13 overflow-y:scroll; /*はみだした分はスクロールする*/ 14 padding: 30px; 15} 16 17.modal-overlay{ 18 display: none; 19 position: fixed; 20 top: 0; 21 left: 0; 22 width: 100%; 23 height: 120%; 24 background-color: rgba(0,0,0,0.65); 25 z-index: 1; 26} 27 28.modal-open, 29.modal-close { 30 cursor: pointer; 31} 32/*モーダル終わり*/ 33
回答2件
0
modalの本来の意味から言うと、親から制御を奪う処理なので
複数のモーダルウィンドウを同時に表示するというのはあまりよいUIとはいません
（alertが複数同時表示されないような話）
投稿2020/06/24 06:00
総合スコア116724
0
ベストアンサー
特定の要素に限定するようにすれば良いのでは。
js
1 $(this).closest(".work_inner").find(".modal-overlay").fadeIn("slow"); //オーバーレイの表示 2 $(this).closest(".work_inner").find(".modal").fadeIn("slow"); //モーダルウインドウの表示
【.closest() | jQuery API Documentation】
https://api.jquery.com/closest/
投稿2020/06/24 04:10
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/24 06:48
2020/06/24 06:52
2020/06/24 07:50