我的引導程序模式不起作用

問題
我正在爲網站製作預留插件。我想要一個日期選擇器的模式，但從我的角度來看，一切似乎都是正確的。但是當我點擊模式按鈕時，沒有任何反應。我在互聯網上搜索了杜布爾檢查了我的CSS/JS鏈接，但我認爲一切都是正確的地方。我的引導程序模式不起作用

有誰知道我做錯了什麼，並幫助我在正確的方向嗎？由於

我的代碼
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>

來源

2017-03-27 W. White

按鈕data-target &模態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>

來源

2017-03-27 09:09:37

如何管理，讓工作模式呢？我改變了它，但它仍然不起作用。 –

不需要在頁腳文件中添加JS代碼。 –

已經刪除它，但它仍然無法工作。不知道我在做什麼錯.. –

你的數據目標不匹配的情態動詞：

<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 =「my_btn」，像這樣

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

來源

2017-03-27 09:07:50

無需使用此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>

來源

2017-03-27 09:14:53

仍然沒有工作:( –

是否有控制檯中的任何錯誤？ –

只有3字體錯誤的字體 –

我的引導程序模式不起作用

回答

相關問題