bootstrapのmodalが動きません

Question

こちらをもとに書いてみました。
しかし、うまく表示されません。
今の状態は、クリックしていないのに最初からmodalが表示されて固まっています。

ファイルはとりあえず上記サイトからGithub経由でダウンロードしてindex.htmlの</body>前に記しています。全部必要なのかもわかりませんが、、、

      <script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/skel.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
            <script src="assets/js/bootstrap-modal.js"></script>
            <script src="assets/js/bootstrap-transition.js"></script>
            <script src="assets/js/bootstrap-modalmanager.js"></script>

下記、コードです。

<li>							
<h3><a href="#myModal" data-toggle="modal"><span class="icon major fa-heart" ></span></a>タイトル</h3>
                                  
 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">モーダルボックス</h3>
  </div>
  <div class="modal-body">
    <p>モーダルボックスの中身です。</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">閉じる</button>
  </div>
</div>               
</li>                                      

うまく状態をお伝えするのが下手できちんとご理解いただけないかもしれませんが、
初心者なものでさっぱりわかりませんのでお手数ですがわかりやすくお教えいただけると非常に助かります。
何卒宜しくお願いいたします。

Answer 1

タイトルという文言がaタグの外側にありませんか？

<h3><a href="#myModal" data-toggle="modal"><span class="icon major fa-heart" ></span></a>タイトル</h3>
↓
<h3><a href="#myModal" data-toggle="modal"><span class="icon major fa-heart" ></span>タイトル</a></h3>

Comments

[sheep_70]

ichamさん、ありがとうございました。
早速やってみました、、、が、変わらないです。。。
一体、なんなんでしょう？？？

[icham]

jsがちゃんと読み込まれていますか？

というか参照してるページのbootstrapはバージョン(2.3.1)古いです。
現行はv3.3.5ですので、新しい方をオススメします。

bootstrap：http://getbootstrap.com/getting-started/
　ダウンロードとscriptタグの書き方が書いてあります。

Modal解説ページ：http://getbootstrap.com/javascript/#modals

[sheep_70]

遅くなりましたが、やっと新しいバージョンにしました。ありがとうございます。複数jsファイルがあるので混乱しました。それで今度は動くようになったのですが、cssがきちんと読み込まれないみたいで構造が崩れてしまいました、、が、cssファイルの記述順を入れ替えると構造はきちんとなったのですが、今度はmodalの表示自体が崩れたりとなかなかうまくいきません。レスポンシブ表示もいまいちうまくいってないのでもうすこしいろいろやってみます。

[icham]

あれ、そんなにファイルありますか？
基本は、fontファイルは別として
bootstrap.cssとbootstrap.jsにjquery.jsがあれば動くと思います。
theme.cssは、必要であればになると思います。

[sheep_70]

すいません、言葉足らずで。既存のcssとjsファイルがあったもので、ファイルに"min"がついてるのもあるので、どれを外していいのかわからなかったりで苦戦していました。既存のコードにうまく載せるのが案外難しいなと。あまりにも初心者すぎてすいません。。。