Bootstrap 3.0 Modalny

Question

Utknąłem. Biorąc pod uwagę, że Bootstrap 3.0 wkrótce zostanie wydany, zdecydowałem się pójść z nim na nowy projekt. Na razie wszystko idzie dobrze, ale nie wiem, jak zrobić Modal Dialog w Bootstrap 3.0.

Czy ktoś ma prosty przykład?

Answer 1

można spróbować zbudować docs: Compile Twitter bootstrap 3 docs (How to)? więc również http://bassjobsen.weblogs.fm/explore-and-install-twitter-bootstrap-3/ od docs:

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

Answer 2

byłem walczy z tym samym problemem, a dzięki tej rozmowie znalazłem mój błąd. Podczas korzystania TwitterBootstrap3, potrzebne są następujące rzeczy:

Przycisk spustu

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

div z tego minimun strukturze:

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

Ważne jest, aby wiedzieć, że jeśli don "umieść modalne okno dialogowe i model-treść, okno modalne nie zostanie poprawnie otwarte"

Answer 3

Znalazłem bardzo dobry przykład, który pozwala ci również pobrać zip ze wszystkimi przykładami kodu o Booststrap 3 Modal.

• Bootstrap 3 Modal explanation
• Download Bootstrap 3 Modal demo

Mam nadzieję, że to pomoże Ci, jak dobrze!