无法在html文件中打开我的模态窗口

Question

试图通过bootstrap教程使用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

试试这个代码，您刚才错过＃符号数据目标

<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

模态的ID前加#在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

在按钮add data-target="#modal-1"。它会工作

打开模式窗口