ボタンストラップ3モーダルがボタンクリックで機能しない

Question

チュートリアルの後に単純なモーダルを作成しました。ボタンをクリックするとモーダルが表示されません。 hrefをdata-targetに変更しようとしましたが、問題は解決しません。以下のコードはモーダルコードです。私は私のCSSやJavaScriptファイルに何も持っていません。

<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a> 

<div class="modal fade" id="myModal"> 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Sign up for the newsletter</h4> 
        <div class=modal-body> 

        </div> 
        </div> 
       </div> 
       </div> 
      </div> 

ここCodePenです：http://codepen.io/jordanbaron123/pen/pbamPa

Answer 1

あなたの頭には次のものが必要です。また、身体の下部にあるブートストラップのリンクを外してください。あなたがブートストラップjsの古いバージョンを実行していたかもしれないように私に見えます。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

ここでは例としてCodepenです。

Answer 2

bodyタグの後に、おそらくすぐに、HTMLのルートにモーダルHTMLを置くようにしてください。それはすべてのhtmlの一番下に置くことができますが、本文の直下の要素またはその後ろに1つのdivとして配置できます。

モーダルHTMLこれらの次の即時ネスティングで動作します：

• 体> div>のモーダルHTML
• 体>モーダルHTML

そして、それが動作します。そうでない場合、モーダルhtmlが多くのネストされた要素の中に置かれていれば、動作しません。

ありがとうございます。