Html CSS Bootstrap Modal not showing up

Question

I am a beginner in programming i'm stuck with a problem..my modal is not working the modal is displaying in the page not in the popup..I desperately need the solution..it would be great if someone can help me get out of this problem.Here is my code snippet..

                                    <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>

And I am putting the links and scripts here..

<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

Change the position of the jquery importing in your html page,that is import jquery first then the bootstrap js because Bootstrapjs require jquery to run.

 <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

Saif,

U have to define java script for opening the modal. For ex: if u want to open modal on button click then u will define commands to open on button

$('#online_exam').click(function(){ $("#myModal").modal('show'); })

Answer 3

Just place the https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js before https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js. you You should load jquery first because bootstrap use jquery features.