Q&A
記述自体に問題は見られないようには思います。bootstrapのバージョンは幾つでしょうか。
前提・実現したいこと
下記サイトのテンプレート（treviso-template）を使用して、ページを作成しているのですが
モーダルウィンドウが開きません。
※DEMOで確認すると開く設定になっている思うのですが。ご教示いただけますと助かります。
宜しくお願いします。
https://moozthemes.com/
発生している問題・エラーメッセージ
モーダルウィンドウが開かない。
該当のソースコード
<section id="portfolio"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <div class="section-title"> <h1>ああああああああああああ</h1> </div> </div> </div> <div class="row row-0-gutter"> <!-- start portfolio item --> <div class="col-md-6 col-0-gutter"> <div class="ot-portfolio-item"> <figure class="effect-bubba"> <img src="images/event.jpg" alt="img02" alt="img02" class="img-responsive" width="948" /> <figcaption> <h2>AAAAAAAAA</h2> <p>aaaaaaa</p> <a href="#" data-toggle="modal" data-target="#Modal-1">View more</a> </figcaption> </figure> </div> </div> <!-- end portfolio item --> <!-- start portfolio item --> <div class="col-md-6 col-0-gutter"> <div class="ot-portfolio-item"> <figure class="effect-bubba"> <img src="images/event.jpg" alt="img02" class="img-responsive" width="948" /> <figcaption> <h2>BBBBBBBBB</h2> <p>bbbbbbbb</p> <a href="#" data-toggle="modal" data-target="#Modal-2">View more</a> </figcaption> </figure> </div> </div> <!-- end portfolio item --> </div> <div class="row row-0-gutter"> <!-- start portfolio item --> <!--<div class="col-md-6 col-0-gutter"> <div class="ot-portfolio-item"> <figure class="effect-bubba"> <img src="images/event.jpg" alt="img02" class="img-responsive" width="948" /> <figcaption> <h2>CCCCCCCCCC</h2> <p>cccccc</p> <a href="#" data-toggle="modal" data-target="#Modal-3">View more</a> </figcaption> </figure> </div> </div> <!-- end portfolio item --> <!-- start portfolio item --> <!--<div class="col-md-6 col-0-gutter"> <div class="ot-portfolio-item"> <figure class="effect-bubba"> <img src="images/event.jpg" alt="img02" class="img-responsive" width="948" /> <figcaption> <h2>DDDDDDDDDDD</h2> <p>ddddddd</p> <a href="#" data-toggle="modal" data-target="#Modal-4">View more</a> </figcaption> </figure> </div> </div> <!-- end portfolio item --> ・ ・ ・ <!-- Modal for portfolio item 1 --> <div class="modal fade" id="Modal-1" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="Modal-label-1">Dean & Letter</h4> </div> <div class="modal-body"> <img src="images/demo/portfolio-1.jpg" alt="img01" class="img-responsive" /> <div class="modal-works"><span>Branding</span><span>Web Design</span></div> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal for portfolio item 2 --> <div class="modal fade" id="Modal-2" tabindex="-1" role="dialog" aria-labelledby="Modal-label-2"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="Modal-label-2">Startup Framework</h4> </div> <div class="modal-body"> <img src="images/demo/portfolio-2.jpg" alt="img01" class="img-responsive" /> <div class="modal-works"><span>Branding</span><span>Web Design</span></div> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal for portfolio item 3 --> <div class="modal fade" id="Modal-3" tabindex="-1" role="dialog" aria-labelledby="Modal-label-3"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="Modal-label-3">Lamp & Velvet</h4> </div> <div class="modal-body"> <img src="images/demo/portfolio-3.jpg" alt="img01" class="img-responsive" /> <div class="modal-works"><span>Branding</span><span>Web Design</span></div> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal for portfolio item 4 --> <div class="modal fade" id="Modal-4" tabindex="-1" role="dialog" aria-labelledby="Modal-label-4"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="Modal-label-4">Smart Name</h4> </div> <div class="modal-body"> <img src="images/demo/portfolio-4.jpg" alt="img01" class="img-responsive" /> <div class="modal-works"><span>Branding</span><span>Web Design</span></div> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal for portfolio item 5 --> <div class="modal fade" id="Modal-5" tabindex="-1" role="dialog" aria-labelledby="Modal-label-5"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="Modal-label-5">Fast People</h4> </div> <div class="modal-body"> <img src="images/demo/portfolio-5.jpg" alt="img01" class="img-responsive" /> <div class="modal-works"><span>Branding</span><span>Web Design</span></div> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/SmoothScroll.js"></script> <script src="js/theme-scripts.js"></script>
また、ブラウザの開発ツールのコンソールに何かエラーが表示されていたら記載お願いします。
ありがとうございます。Bootstrap v3.3.5 (http://getbootstrap.com)になります。
エラーになります。Failed to load resource: net::ERR_FILE_NOT_FOUND：bootstrap.min.css,SmoothScroll.js,theme-scripts.js,avicon.icoの4つになります。
回答1件
0
ベストアンサー
Failed to load resource: net::ERR_FILE_NOT_FOUND
"指定された場所にファイルが存在しないので読み込めません"
という意味です。
それぞれのファイルが実行しようとしているhtmlの指定の場所にあるか確認してください。
なければhtmlの読み込み部分の記述を修正してください。
GoogleChromeの場合、ブラウザで「ソースを表示」するとリンクになっているので
クリックしてファイルの内容が表示されれば合っている、ということになります。
投稿2018/04/05 08:00
総合スコア80850
あなたの回答
tips
プレビュー
