Q&A
.js-modal-openのeachにしたのはどのような意図が？
そのままclick書くのでいけそうですけど
jqueryで、複数(3つ）のモーダルウィンドウを設定したのですが、クリックしても
ウィンドウが１つも表示されません。
それぞれモーダルが表示されるにはどうしたらいいのでしょうか。
jqueryは、htmlのheadに表示しております。
<script type="text/javascript"> $(function () { $(".js-modal-open").each(function () { $(this).on("click", function () { var target = $(this).data("target"); var modal = document.getElementById(target); $(modal).fadeIn(); return false; }); }); $(".js-modal-close").on("click", function () { $(".js-modal").fadeOut(); return false; }); }); </script>
<section class="inner"> <h2>works<span class="h2_inner">作品</span></h2> <div class="work"> <div class="work_inner"> <!--01はじまり--> <img src="images/nenga.jpg" alt="制作物" class="work_img" /> <div class="work_name"> <p class="work_p"> <a class="js-modal-open" href="" data-target="modal01"> 年賀状デザイン </a> </p> <p class="work_icon"> デザイン </p> </div> <div id="modal01" class="modal js-modal"> <div class="modal__bg js-modal-close"></div> <!--↑モーダルの背景をクリックしても閉じられるように設定 する空要素--> <div class="modal__content"> <!--モーダルで表示したいコンテンツ--> <img src="images/nenga.jpg" alt="01デザイン" /> <a class="js-modal-close" href="">閉じる</a> </div> <!--modal__content--> </div> <!--modal01--> </div> <!--work_inner--> <div class="work_inner"> <!--02はじまり--> <img src="images/inaguma.jpg" alt="制作物" class="work_img" /> <div class="work_name"> <p class="work_p"> <a class="js-modal-open" href="" data-target="modal02"> ーーーのホームページ </a> </p> <p class="work_icon"> webサイト </p> </div> <div id="modal02" class="modal js-modal"> <div class="modal__bg js-modal-close"></div> <!--↑モーダルの背景をクリックしても閉じられるように設定 する空要素--> <div class="modal__content"> <!--モーダルで表示したいコンテンツ--> <img src="images/nenga.jpg" alt="02ホームページ" /> <a class="js-modal-close" href="">閉じる</a> </div> <!--modal__content--> </div> <!--modal02--> </div> <!--work_inner--> <div class="work_inner"> <!--03開始--> <img src="images/dailyui.jpg" alt="制作物" class="work_img" /> <div class="work_name"> <p class="work_p"> <a class="js-modal-open" href="" data-target="modal03"> daily ui </a> </p> <p class="work_icon"> デザイン </p> </div> <div id="modal03" class="modal js-modal"> <div class="modal__bg js-modal-close"></div> <!--↑モーダルの背景をクリックしても閉じられるように設定 する空要素--> <div class="modal__content"> <!--モーダルで表示したいコンテンツ--> <img src="images/nenga.jpg" alt="03デザイン" /> <a class="js-modal-close" href="">閉じる</a> </div> <!--modal__content--> </div> <!--03終了--> </div> <!--work_inner--> </div> </section>
css
1/*wok*/ 2.work { 3 display: flex; 4 align-items: center; 5 justify-content: space-between; 6} 7.work_icon { 8 font-size: 10px; 9 background-color: bisque; 10 width: 80px; 11 border-radius: 10px; 12 padding: 2px; 13 margin-top: 13px; 14 text-align: center; 15} 16 17p.work_icon { 18} 19.work_name { 20 display: flex; 21 align-items: center; 22 justify-content: space-between; 23} 24 25.work_img { 26 width: 300px; 27 box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 28 0 2px 2px rgba(0, 0, 0, 0.19); 29 transition: 0.4s; 30} 31.work_p { 32 margin-top: 20px; 33} 34 35* { 36 box-sizing: border-box; 37 margin: 0; 38 padding: 0; 39} 40.js-modal-open { 41 color: #5c5959; 42} 43 44.modal { 45 display: none; 46 height: 100vh; 47 position: fixed; /*固定表示*/ 48 top: 0; 49 width: 100%; 50} 51.modal__bg { 52 background: rgba(0, 0, 0, 0.8); 53 /*オーバーレイしてることがわかるように 54 半透明*/ 55 height: 100vh; 56 position: absolute; 57 width: 100%; 58} 59.modal__content { 60 background: #fff; 61 left: 50%; 62 padding: 30px; 63 position: absolute; 64 top: 50%; 65 transform: translate(-50%, -50%); 66 width: 60%; 67} 68.modal__content img { 69 width: 700px; 70 text-align: center; 71}
すみません、「jquery モーダルウィンドウ」で検索して出てきたサイト様を
参考にさせていただいてて、そのまま書いてますm(_ _)m click調べてみます！
https://jsfiddle.net/s1zvL0rx/ とりあえず動くようです。エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
そちら見てるとできてますね。。。！
コンソールに、何も出てこなかったです...
jQueryは読み込んでいますか？
はい。同じフォルダ内にあり、
headタグにこちらを挿入しています。
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.4.1.min.js"
></script>
<script type="text/javascript">
$(function () {
$(".js-modal-open").each(function () {
$(this).on("click", function () {
var target = $(this).data("target");
var modal = document.getElementById(target);
$(modal).fadeIn();
return false;
});
});
$(".js-modal-close").on("click", function () {
$(".js-modal").fadeOut();
return false;
});
});
</script>
キャッシュを解除したら、エラー（というかワーニング）が出てきました。
A cookie associated with a cross-site resource at http://jquery.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
というものでした 調べてみますm(_ _)m
まだ解決されてないのでしょうか？
解決済みの場合は自己解決で閉じても大丈夫です。
ソースコードに問題はなく、jQueryが正しく読み込めてないことだけにみえます。
cross-site resourceの問題もたぶんいろいろjQueryのパスを試しているうちに"https://code.jquery.com/”のドメインを”http://jquery.com/”にタイポしてしまっただけではないでしょうか。
わざわざありがとうございます！そうですね、他の簡単なjqueryでは動いたので、
このコードのどこかがおかしかったようです...!
回答1件
0
ベストアンサー
「質問への追記・修正の依頼」で指摘したとおり、提示したコードは動きました。
思いつくことは下記のような問題です。
- HTMLの構文がどこかでおかしく、全体が崩れている
<!DOCTYPE html>が無い- 提示されていない部分のCSSでエラーがあり、それ以降のコードが無視されている
- 提示されていない部分のCSSで表示を打ち消し、もしくは画面外に追いやるなどの指定がある
とりあえず下記のようにしてクリックイベントが採れているか、その中身で思った内容が入っているかを確認してみてください。そこが問題なければ、デベロッパーツールの「Elements」パネルでモーダル要素がどうなっているかを確認してみてください。
js
1$(".js-modal-open").on("click", function () { 2 var target = $(this).data("target"); 3 var modal = document.getElementById(target); 4 $(modal).fadeIn(); 5 console.log( target, modal );// ADD 6 return false; 7});
【ChromeのデベロッパーツールでJSをデバッグする方法（2019年版） - ICS MEDIA】
https://ics.media/entry/190517/
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
投稿2020/04/09 04:25
総合スコア69407
あなたの回答
tips
プレビュー
