Html CSS引導模式沒有顯示

Question

我是編程的初學者我卡住了一個問題..我的模態不工作模態顯示在頁面中不在彈出窗口..我迫切需要解決方案..這將是巨大的，如果有人能幫助我走出這個problem.Here是我的代碼片段..

        <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，然後導入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>

Answer 2

賽義夫，

u必須定義Java腳本打開模態。對於例如：如果u想要打開按鈕，點擊模式則u將定義命令按鈕

$（ '＃online_exam'）點擊（函數（）{ $（ 「＃myModal」）模式打開。 （'show'）; }）

Answer 3

只需將https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js放置在https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js之前即可。你應該首先加載jquery，因爲bootstrap使用jquery特性。