2017-02-12 57 views
0

我嘗試將datetimepicker包括到我的模態窗體。我的所有代碼在另一個html頁面中工作。但是當我點擊模式按鈕後,將這些代碼包含到我自己的頁面中時,會打開一個黑色的空白頁面。 花費數小時後,我發現當我排除bootsrap.css文件時,它工作得很好。但我需要靴子款式。 我嘗試查找並刪除模式和btn樣式。但它不會改變任何事情。唯一的解決方案不包括bootsrap.css。datetimepicker將無法運行時包括bootstrap.css

<head> 

<link rel="stylesheet" href="css/grid.css"> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" href="css/touchTouch.css"> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel='stylesheet prefetch' href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"> 
<link rel='stylesheet prefetch' href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2708/bootstrap-datetimepicker.min.css"> 

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<script src="js/jquery.js"></script> 
<script src="js/touchTouch.jquery.js"></script> 
<script src="js/jquery-migrate-1.2.1.js"></script> 
<script src="js/script.js"></script> 
<script src="js/packery.pkgd.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<!--[if (gt IE 9)|!(IE)]><!--> 
<script src="js/jquery.mobile.customized.min.js"></script> 
<script src="js/wow.js"></script> 
<script> 
    $(document).ready(function() { 
     if ($('html').hasClass('desktop')) { 
      new WOW().init(); 
     } 
    }); 
    </script> 
<body> 
    <div class="item col-sm-3" > 
         <div class="in"> 
          <div class="img"> 
           <img src="images/arabalar/ekonomi/Dacia-SANDERO.png" width="100%"/> 
          </div> 
          <div class="name"> 
           Dacia-SANDERO 
          </div> 

         <!-- Button to trigger modal --> 
      <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

      <!-- Modal --> 
       <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal header</h3> 
      </div> 
       <div class="modal-body"> 
       <div id="datetimepicker1" class="input-append date"> 
       <input data-format="dd/MM/yyyy hh:mm:ss" type="text">      </input> 
      <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span> 
      </div> 
    </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     </div> 
</div> 

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js'></script> 
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2708/bootstrap-datetimepicker.min.js'></script> 
<script src="js/index1.js"></script> 

和index1.js含有

$(function() { 
    $('#datetimepicker1').datetimepicker({ 
     language: 'pt-BR' 
    }); 
}); 
+0

你能分享一個鏈接到這個「datetimepicker」庫的文檔嗎? – kkaosninja

+0

http://s6.dosya.tc/server8/etedk6/site.rar.html –

回答

0

僅包括一個bootstrap.js文件,無論是bootstrap.min.js或bootstrap.js文件或

包括Jquery的第一然後在頭部添加引導程序。

+0

Thanx for reply。我做了你所說的。 jquery在bootsrap.js之前。我錯過了別的東西嗎? –

+0

發佈提問 –

+0

可以下載並檢查嗎?在小提琴我不能添加幾個樣式文件http://s6.dosya.tc/server8/etedk6/site.rar.html –