Bootstrap Modal nicht aufspringen

Ich bin wirklich neu auf bootstrap und ich bin versucht, fügen Sie ein popup mit Modals. Ich habe den code und die Skripte, aber wenn Sie klicken Sie auf die Schaltfläche Ihr nicht aufspringen. Ich kann sagen, das etwas kommt, da der hintergrund verblasst ein wenig, aber ein popup kommt nicht. Also brauche ich ein wenig Hilfe herauszufinden, warum die nicht auftauchen.

My JavaScript links: 
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
   <script src="js/bootstrap.min.js" type="text/javascript"></script>

Code for Modals: 
<div class="modal hide fade" id="myModal">

           <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

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

Welche version von bootstrap haben Sie? Ich habe 2.3.2 klicken, und funktioniert einwandfrei. Während es funktioniert nicht auf 3.2 - klicken
Ich bin mit 3.2 haben
Wie kann ich get it to work mit 3,2 @phillip100
es ist ein HTML-Beispiel, die funktioniert.
Seinem auftauchen, aber es wird nicht lassen Sie mich klicken Sie auf alles, um es zu schließen oder verlassen des popup. Denkst du, dass hat etwas damit zu tun, wo Ihr auf die Seite? @phillip100

InformationsquelleAutor DAndre Ealy | 2015-02-07

1

Dies ist ein Kompatibilitäts-Problem v2.X vs v3.X

Bootstrap 3.0 Neue Klassen & Elemente

Modal-markup geändert hat .modal-header .modal-body .modal-footer nun wickeln sich in .modal-content und .modal-dialog

Modal Migration

Wie konvertieren von einer 2.x auf 3.0 modal:
- entfernen .hide von der .modal (es ist jetzt standardmäßig ausgeblendet)
- wrap .modal-header .modal-body .modal-footer im inneren .modal-content
- wrap .modal-content innen .modal-dialog
Veranstaltungen sind in einem Namensraum. Beispielsweise zur Bearbeitung des modal 'show' - Ereignis, verwenden 'show.bs.modal'.

Referenz

Bootstrap 3 modal Beispiel:
```
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          Content for the dialog /modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
```
JSFiddle

Bin ich verloren, nun, ich nahm den gleichen code, die Sie mir von diesem link. Es ist aufspringen, aber ich kann nicht klicken Sie auf es zu schließen
aktualisierte Antwort mit einem modalen Beispiel. Sollten Sie eine data-dismiss="modal" Attribut in enger Knöpfen
Ich tun, ich wurde gefragt, denkst du es hat etwas damit zu tun, wo Ihr auf die Seite, weil es nicht einmal lassen Sie mich klicken Sie auf eine beliebige Stelle innerhalb
Ja, es könnte sein. Versuchen Sie, legen Sie Sie direkt nach dem öffnen body tag. Die Eröffnung modal kann überall sein
Du bist herzlich willkommen 🙂

InformationsquelleAutor Artur Filipiak

Komplettes Beispiel mit CDN. DAMIT können Sie laden Sie die neueste version von Url

<html>
    <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">


<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

    <body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 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-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">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>
  </div>
</div>
    </body>
</html>

InformationsquelleAutor Nadeemmnn Mohd

0

Was ich in der Regel nicht für modals nur mit JavaScript und Bootstrap ist ein onClick-Ereignis auf die Schaltfläche, führt eine JavaScript-Methode, das zeigt der modal.

In Ihre HTML:
```
<button onclick="myFunction()">Click me</button>
<script>
    function myFunction(){
        $('#myModal').modal('show') 
    }
</script>
```
Ändern Sie einfach den Namen der Funktion myFunction Sie zu dem gewünschten Namen und myModal von der id, Ihrer modal.

Hier ist das bootstrap docs, wo der modal-Zeug liegt, für zukünftige Referenz getbootstrap.com/javascript/

Seinem auftauchen, aber jetzt seine nicht erlaubte mir, um es zu schließen, oder klicken Sie irgendwo in das popup.

InformationsquelleAutor TRex22

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.