Question

问题
我正在为网站制作预订插件。我想要一个日期选择器的模态，但从我的角度看，一切似乎都是正确的。但是当我点击模态按钮时，没有任何反应。我在互联网上搜索过dubble检查了我的css / js链接，但我认为一切都是正确的地方。

有谁知道我做错了什么并帮助我朝着正确的方向前进？感谢

我的代码
testpage_modal.php

response(echo("hi"));

的header.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(); ?>

footer.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" >

Answer 1

您的数据目标与模式不匹配：

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

应该是：

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

或者如果你想使用javascript，那么你应该给你的按钮ID =＆＃34; my_btn＆＃34;，就像这样

<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

按钮data-target＆amp;模态id应匹配，否则你的模态不起作用。

<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

无需使用此JS代码。只需删除这些行：

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

并替换按钮的以下行：

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

我的bootstrap模式不起作用

3 个答案: