javascript - Html CSS Bootstrap 模态未显示

Question

我是编程的初学者，我遇到了一个问题..我的模态不工作模态显示在页面而不是弹出窗口中..我迫切需要解决方案..如果有人可以的话会很棒帮助我摆脱这个问题。这是我的代码片段..

                                    <div class="info-box">
                                    <h3>M Saifur Rahman</h3>
                                    <span class="instructor-profession">Director,Business Development</span>

                                    <div class="divider"></div>


<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>`enter code here`
          <h4 class="modal-title">M Saifur Rahman,PMP</h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

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

我把链接和脚本放在这里..

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

Answer 1

更改jquery在您的html页面中导入的位置，即先导入jquery然后再导入bootstrap js，因为Bootstrapjs需要jquery来运行。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 <div class="info-box">
                                    <h3>M Saifur Rahman</h3>
                                    <span class="instructor-profession">Director,Business Development</span>

                                    <div class="divider"></div>


<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">M Saifur Rahman,PMP</h4>
        </div>
        <div class="modal-body">
          <p>Here goes the body content</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

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