モーダルウィンドウをhtmlファイルで開くことができません

Question

ブートストラップチュートリアルでclass = "model"を使用してモーダルウィンドウを作成しようとしました。私はチュートリアル、インストールされたブートストラップと全く同じようにしましたが、私のコードは動作しません。何が問題なの？私はjsや他のプラグインを使用していないし、私はそうしてはいけないと信じています。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<button type="button" class="btn btn-success" data-toggle="modal" data-target="modal-1"> 
 
    Open modal window 
 
    </button> 
 
<div class="modal" id="modal-1"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h4 class="modal-title">Registration</h4> 
 
     <button class="close" type="button" data-dismiss="modal"> 
 
    \t \t \t \t \t <i class="fa fa-close"></i> 
 
    \t \t \t \t </button> 
 

 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Something</p> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

におけるモーダルのidはあなただけのデータ・ターゲットに＃記号を逃したこのコードを試してみてくださいする前に#を追加

ボタン add data-target="#modal-1"で

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1"> 
    Open modal window 
    </button> 


<div class="modal" id="modal-1"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title">Registration</h4> 
     <button class="close" type="button" data-dismiss="modal"> 
       <i class="fa fa-close"></i> 
      </button> 

     </div> 
     <div class="modal-body"> 
     <p>Something</p> 

     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button> 
     </div> 
    </div> 
    </div> 

</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 2

data-target

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1"> 
 
    Open modal window 
 
    </button> 
 
<div class="modal" id="modal-1"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h4 class="modal-title">Registration</h4> 
 
     <button class="close" type="button" data-dismiss="modal"> 
 
    \t \t \t \t \t <i class="fa fa-close"></i> 
 
    \t \t \t \t </button> 
 

 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Something</p> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 3

。それは動作します

モーダルウィンドウを開く