CODEWITHSUNDEEP
jquerybootstrap-modal
Elvis Mawira
Elvis Mawira

Reputation: 11

bootstrap modal popup does not show at all

i'm new to bootstrap and i can't seem to get my modal working. my data-target="#details-1". what could be the problem.i have tried to find it for several days to no avail. thanks in advance.here's the code 

        <!--header tags-->
        <html>
        <head>
        <title>m-kibanda</title>
          <link rel="stylesheet" href="css/bootstrap.min.css">
          <link rel="stylesheet" href="css/bootstrap-grid.css">
          <link rel="stylesheet" href="css/flexboxgrid.css">
           <link rel="stylesheet" href="css/main.css">
          <meta name="viewport" content="width=device-width, initial-scale=1, 
          user-scalable=no">
          <script 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
         </script>
          <script src="js/bootstrap.min.js"></script>
          <script src="js/bootstrap.js"></script>
        </head>
        <!--my modal-->
        <div class="modal fade details-1" id="details-1" tabindex="-1" 
        role="dialog" aria-labelledby="details-1" aria-hidden="true">
           <div class="modal-dialog modal-lg">
             <div class="modal-header">
               <button class="close" type="button" data-dismiss="modal" aria-
        label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
              <h4 class="modal-title text-center">Cabbages</h4>
             </div>
             <div class="modal-body">
               <div class="container-fluid">
                  <div class="row">
                    <div class="col-sm-6">
                     <div class="center-block">
                       <img src="images/New Folder/JPEG/11.jpg" alt="Cabbages" 
        class="details img-responsive">
                     </div>
                   </div>
                   <div class="col-sm-6"></div>
                 </div>
               </div>
             </div>
           </div>
         </div>

Upvotes: 0

Views: 830

Answers (2)

Master Yoda
Master Yoda

Reputation: 4402

You were missing the following attributes data-toggle="modal" data-target="#details-1". These are bootstrap specific and tell the bootstrap.js scripts to open a modal / which element to target.

.img-responsive {
    margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#details-1"> Details</button>

<!-- Modal -->
<div id="details-1" class="modal fade" 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 text-center">Cabbages</h4>
      </div>
      <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-6">
               <div class="center-block text-center">
                 <img src="http://www.rivieraproduce.eu/wp-content/uploads/2011/06/image_riviera_savoy_cabbage.jpg" alt="Cabbages" 
  class="details img-responsive">
               </div>
             </div>
             <div class="col-sm-6"></div>
           </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Upvotes: 1

Zakaria Charik
Zakaria Charik

Reputation: 119

Place the jquery call at first, and you have to trigger the show up of your modal by any click event.

$('#details-1').modal('show')

Upvotes: 0

Related Questions