Q&A
モーダルとは、ご提示のコードで言うとどの部分に当たりますか？
#modal-center2 ですか？
前提・実現したいこと
現在、ポートフォリオの作成をしています。
Workの箇所で、模写した作品等が表示され、クリックすると該当の画像がモーダル表示されるようにしたいのですが、なぜか指定した画像でない他の画像が表示されてしまうことがあります。
原因が全くわからないので、教えていただけると幸いです。
発生している問題・エラーメッセージ
html
div class="works"> <h1 id="works">Work</h1> <h4>過去の制作の実績の一部をご紹介します。</h4> <div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-match uk-grid-small ex1 scroll-fade-row" uk-grid> <div class="uk-child-width-1-3@s uk-margin-left image-card works-actual uk-text-center uk-card-default"> <div class="image uk-inline-clip uk-transition-toggle" tabindex="0" href="#modal-center" uk-toggle> <img src="img/c-facebook.png" class="image"> <div class="gray uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default"> <p class="uk-h4 uk-margin-remove">模写作品</p> <div>facebook ログイン画面</div> <div id="modal-center" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical modal"> <button class="uk-modal-close-default" type="button" uk-close></button> <img src="img/c-facebook.png" id="image"> </div> </div> </div> </div> </div> <div class="uk-child-width-1-3@s uk-margin-left image-card works-actual uk-text-center uk-card-default "> <div class="image uk-inline-clip uk-transition-toggle" tabindex="0" href="#modal-center2" uk-toggle> <img src="img/aono.png" class="image"> <div class="gray uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default"> <p class="uk-h4 uk-margin-remove">模写作品</p> <div>蒼乃建設</div> <div id="modal-center2" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical modal"> <button class="uk-modal-close-default" type="button" uk-close></button> <img src="img/aono.png" id="image"> </div> </div> </div> </div> </div> <!-- <div class="works-actual uk-text-center works-actual uk-text-center uk-card-default" style="padding-left:-15px"> <div class="uk-inline-clip uk-transition-toggle" tabindex="0"> <img src="img/aono.png"> <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default"> <p class="uk-h4 uk-margin-remove">模写作品</p> <div>蒼乃建設</div> </div> </div> </div> --> <div class="uk-child-width-1-3@s uk-margin-left image-card works-actual uk-text-center uk-card-default "> <div class="image uk-inline-clip uk-transition-toggle" tabindex="0" href="#modal-center2" uk-toggle> <img src="img/dc.png" class="image"> <div class="gray uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default"> <p class="uk-h4 uk-margin-remove">模写作品</p> <div>デンタルクリニック</div> <div id="modal-center2" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical modal"> <button class="uk-modal-close-default" type="button" uk-close></button> <img src="img/dc.png" id="image"> </div> </div> </div> </div> </div> <div class="uk-child-width-1-3@s uk-margin-left image-card works-actual uk-text-center uk-card-default "> <div class="image uk-inline-clip uk-transition-toggle" tabindex="0" href="#modal-center2" uk-toggle> <img src="img/furniture1.png" class="image"> <div class="gray uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default"> <p class="uk-h4 uk-margin-remove">模写作品</p> <div>蒼乃建設</div> <div id="modal-center2" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical modal"> <button class="uk-modal-close-default" type="button" uk-close></button> <img src="img/furniture1.png" id="image"> <img src="img/furniture2.png" id="image"> <img src="img/furniture3.png" id="image"> <img src="img/furniture4.png" id="image"> </div> </div> </div> </div> </div> <div class="uk-child-width-1-3@s uk-margin-left image-card works-actual uk-text-center uk-card-default "> <div class="image uk-inline-clip uk-transition-toggle" tabindex="0" href="#modal-center2" uk-toggle> <img src="img/aono.png" class="image"> <div class="gray uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default"> <p class="uk-h4 uk-margin-remove">模写作品</p> <div>蒼乃建設</div> <div id="modal-center2" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical modal"> <button class="uk-modal-close-default" type="button" uk-close></button> <img src="img/aono.png" id="image"> </div> </div> </div> </div> </div> <div class="uk-child-width-1-3@s uk-margin-left image-card works-actual uk-text-center uk-card-default "> <div class="image uk-inline-clip uk-transition-toggle" tabindex="0" href="#modal-center2" uk-toggle> <img src="img/aono.png" class="image"> <div class="gray uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default"> <p class="uk-h4 uk-margin-remove">模写作品</p> <div>蒼乃建設</div> <div id="modal-center2" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical modal"> <button class="uk-modal-close-default" type="button" uk-close></button> <img src="img/aono.png" id="image"> </div> </div> </div> </div> </div> </div>
css
.image-card { width:400px; height:270px; padding-left:0px; } .image { width:100%; height:100%; object-fit:cover; } img { width:100%; /* height:100%; */ cursor: pointer; object-fit: contain; } .uk-grid-margin { margin-top: 50px; } .works { margin: 0 80px; height:1000px; }
js
$(function(){ $('a[href^="#"]').click(function(){ var adjust = 0; var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top + adjust; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); $(function(){ const image1 = document.getElementById("image1"); let stat = false; function func1() { if(stat) { image1.classList.add('off'); image1.classList.remove('on'); } else { image1.classList.add('on'); image1.classList.remove('off'); } stat = !stat; } var effect_btm = 300; // 画面下からどの位置でフェードさせるか(px) var effect_move = 50; // どのぐらい要素を動かすか(px) var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000 //親要素と子要素のcssを定義 $('.scroll-fade-row').css({ opacity: 0 }); $('.scroll-fade-row').children().each(function(){ $(this).css({ opacity: 0, transform: 'translateY('+ effect_move +'px)', transition: effect_time + 'ms' }); }); // スクロールまたはロードするたびに実行 $(window).on('scroll load', function(){ var scroll_top = $(this).scrollTop(); var scroll_btm = scroll_top + $(this).height(); var effect_pos = scroll_btm - effect_btm; //エフェクトが発動したとき、子要素をずらしてフェードさせる $('.scroll-fade-row').each( function() { var this_pos = $(this).offset().top; if ( effect_pos > this_pos ) { $(this).css({ opacity: 1, transform: 'translateY(0)' }); $(this).children().each(function(i){ $(this).delay(100 + i*200).queue(function(){ $(this).css({ opacity: 1, transform: 'translateY(0)' }).dequeue(); }); }); } }); }); });
そうですね。下記箇所になります。
```
<div id="modal-center2" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical modal">
<button class="uk-modal-close-default" type="button" uk-close></button>
<img src="img/dc.png" id="image">
</div>
</div>
```
ご提示のコードでは、その要素を操作するようなスクリプトが見当たりませんでした。
ご提示のコードを試してみましたが、どこをクリックするとモーダルが開くのかわかりませんでした。
問題が再現するコードをご提示ください。
uikitを使用しているので、画像をクリックすると自然にモーダル表示がされるようになっています。
https://getuikit.com/
そーゆーのは質問に書かないとわからないもんですよー
回答1件
0
自己解決
modal箇所のidがコピペをしてしまっていたがために、複数同じものがあったのでエラーが発生していたようです。
修正すると、エラーがなくなりました。
id="modal-center2"←数字が複数同じだった
投稿2022/02/07 11:05
総合スコア32
あなたの回答
tips
プレビュー
