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特性。