2013-07-10 33 views
22

Ich bin fest. Da Bootstrap 3.0 kurz vor der Veröffentlichung steht, habe ich beschlossen, es für ein neues Projekt zu verwenden. Bis jetzt läuft alles gut, aber für mein Leben kann ich nicht herausfinden, wie man einen Modal Dialog in Bootstrap 3.0 macht.Bootstrap 3.0 Modal

Hat jemand ein einfaches Beispiel?

+1

Es gibt Informationen über das Bootstrap 3 Modal hier: https://github.com/twitter/bootstrap/pull/6342 - Aber es sollte grundsätzlich das gleiche wie das 2.x-Modal funktionieren. Was hast du bisher versucht? – ZimSystem

+2

Hier ist eine funktionierende Demo http://www.bootply.com/67046 für das BS3 modal – ZimSystem

Antwort

51

Sie könnten versuchen, die Dokumentation zu erstellen: Compile Twitter bootstrap 3 docs (How to)? so auch http://bassjobsen.weblogs.fm/explore-and-install-twitter-bootstrap-3/ aus der Dokumentation:

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

    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
      ... 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 
+0

Dies funktionierte. Einfach. Nicht sicher, was ich falsch gemacht habe. Ich habe einfach alles rausgerissen und damit angefangen. Vielen Dank! – Eric

+0

Ich habe auch ein Problem mit dem Modal, und ich schneide direkt von der Demo auf der Website. Drücke den "Launch dmeo modal link in der Titelleiste. Http://jsfiddle.net/RMgZV/2/ – andyczerwonka

+2

@andyczerwonka kopiere den HTML-Code deines Modals in einen Bereich, der sich nicht in der Navbar befindet. Siehe: http://jsfiddle.net/ kcS2N/1 / –

0

Ich habe gegen das gleiche Problem zu bekämpfen und dank dieses Gespräch, das ich meinen Fehler gefunden. Während TwitterBootstrap3 verwenden, müssen Sie die folgenden Dinge:

A-Taste Auslöser

<a data-toggle="modal" 
    href="#myModal" 
    class="btn btn-primary btn-lg" 
>Launch demo modal</a> 

An ein div mit dieser minimun Struktur:

<div class="modal fade" 
    id="myModal" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="myModalLabel" 
    aria-hidden="true" 
> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <!-- blah blah content here --> 
     </div> 
    </div> 
</div> 

Es ist wichtig zu wissen, dass, wenn Sie don 'tt modal-dialog und model-content platzieren, wird das modale fenster nicht richtig geöffnet