2017-02-12 2 views
0

Ich versuche, datetimepicker zu meinem modalen Formular einzuschließen. Meine alle Codes arbeiten in einer anderen HTML-Seite. Aber wenn ich diesen Code auf meine eigene Seite nach dem Klicken auf modale Schaltfläche einfüge, öffnet sich eine schwarze leere Seite. Nach Stunden habe ich herausgefunden, dass wenn ich bootsrap.css Datei ausgeschlossen habe funktioniert es großartig. Aber ich brauche Bootsrap Styles. Ich versuche, modale und btn Stile zu finden und zu löschen. Aber es ändert nichts. Die einzige Lösung, die bootsrap.css ausschließt.datetimepicker wird nicht ausgeführt, wenn include 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> 

und die index1.js enthalten

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

Können Sie einen Link zu der Dokumentation für diese "datetimepicker" -Bibliothek freigeben? – kkaosninja

+0

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

Antwort

0

Fügen Sie nur eine bootstrap.js Datei, entweder bootstrap.min.js oder bootstrap.js Datei oder

JQuery Fügen Sie zuerst, dann füge Bootstrap in deinen Kopfbereich ein.

+0

Danke für die Antwort. Ich habe getan, was du sagst. jquery ist vor bootsrap.js. Habe ich etwas anderes vermisst? –

+0

Post eine Geige mit Ausgabe –

+0

können Sie hier herunterladen und überprüfen? in geige kann ich nicht mehrere style-dateien hinzufügen http://s6.dosya.tc/server8/etedk6/site.rar.html –

Verwandte Themen