My bootstrap modal isn't working

Question

Question
I'm making a reservation plugin for a website. I want a modal for a datepicker, but from my perspective everything seems right. But when I click the modal-button, nothing happens. I've searched on the internet en dubble checked my css/js links but I think everything is the right place.

Does anyone know what I'm doing wrong and help me in the right direction? Thanks

MY CODE
testpage_modal.php

<?php /* Template name: Modal template */ ?>

<?php get_header(); ?>

<div id="content" role="main">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- HERO
================================================== -->
<div class="row home-area-hero">
  <div class="container-large">
    <img src="" class="paint-stripe" />

    <div class="container visual-hero" style="background-image:url('');">
      <div class="visual-hero-content">
        <h3><?php the_title();?></h3>
      </div>
    </div>
  </div>
</div><!-- end HERO -->

<!-- STRATEGIES
================================================== -->
<div class="row page-area-6">
  <div class="container">

    <label>Selecteer uw gewenste datum<span style="color:red;"> *</span></label><br>
    <input type="text" name="datum" value="" required>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_btn">Kies datum >&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-calendar"></span></button>

    <!-- Modal -->
    <div id="my_modal" 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">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div><!-- end CONTENT -->
<?php endwhile; endif; ?>


<?php
get_footer(); ?>

header.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">

<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="css/style.css" >

footer.php

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_btn").click(function(){
    $("#my_modal").modal('show');
});
});
</script>
</body>
</html>

Answer 1

Your data-target doesn't match the modals:

 <button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_btn">Kies datum >&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-calendar"></span></button>

Should be:

 <button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="my_modal">Kies datum >&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-calendar"></span></button>

Or if you want to use the javascript, then you should give your button the ID = "my_btn", like this

<button type="button" class="btn btn-default btn-md" id="my_btn">Kies datum >&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-calendar"></span></button>

Answer 2

button data-target & modal id should be match otherwise your modal not worked.

<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_btn">Kies datum >&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-calendar"></span></button>

<!-- Modal -->
<div id="my_btn" class="modal fade" role="dialog">
</div>

Answer 3

No need to use this JS code. Just remove those lines:

<script type="text/javascript">
 $(document).ready(function(){
  $("#my_btn").click(function(){
   $("#my_modal").modal('show');
  });
 });
</script>

and replace following line for your button:

<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_modal">Kies datum >&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-calendar"></span></button>

My bootstrap modal isn't working

Question

3 answers

solution1
0 2017-03-27 09:07:50

solution2
0 ACCPTED 2017-03-27 09:09:37

solution3
0 2017-03-27 09:14:53

My bootstrap modal isn't working

Question

3 answers

solution1 0 2017-03-27 09:07:50

solution2 0 ACCPTED 2017-03-27 09:09:37

solution3 0 2017-03-27 09:14:53

solution1
0 2017-03-27 09:07:50

solution2
0 ACCPTED 2017-03-27 09:09:37

solution3
0 2017-03-27 09:14:53