2016-07-19 38 views
0

Ich lerne, um ein grundlegendes Modal zu machen, das auf Klicken eines Links zeigt. Kann mir jemand erklären, warum der folgende Code nicht funktioniert? Beim Klicken passiert nichts.(bootstrap) modal zeigt nicht

Muss ich auch immer Bootstrap CSS in den Kopf aufnehmen? Ich stelle fest, dass das Modal nicht versteckt ist, wenn es nicht enthalten ist. Aber wenn ich es einschließe, überschreibt es meine Webseite CSS. Hier

ist die Geige Link: https://fiddle.jshell.net/skLjx4cy/#&togetherjs=M9bR7EHJAE

Und Code:

<!DOCTYPE html> 
<html dir="ltr" lang="en"> 
    <head> 
     <meta content="text/html; charset=utf-8" http-equiv="content-type">   
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script> 
      function loadModal() { 
       $('#settingsModal').modal('show'); 
      } 
     </script> 
     </head> 
    <body> 
     <div style="margin-left:10px; margin-top:10px;" id="setting_websearch"> 
         <a href="" onclick="loadModal()">Web search settings</a><br> 
         <div style="margin-left: 25px; margin-top: 10px; font-size:small;">Advanced 
          users only. </div> 
        </div> 
     <div id="log"></div> 
     <div class="modal fade" id="settingsModal" role="dialog"> 
      <div class="modal-dialog"> 
       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <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> 
    </body> 
</html> 

Antwort

0

OK, das Problem scheint das Linkziel zu sein. Als ich von

geändert
<a href="" onclick="loadModal()"> 

zu

<a href="#" onclick="loadModal()"> 

es funktioniert

Obgleich ich einige Vorschläge zu schätzen wissen, warum es so ist.

danke