Remote-Modal-Dialog des Bootstrap funktioniert nicht

Ich habe Probleme mit modalen Dialogen von der Twitter Bootstrap API.Remote-Modal-Dialog des Bootstrap funktioniert nicht

Ich versuche, einen modalen Dialog mit dem Inhalt von einer Remote-HTML-Seite zu laden. Ich habe zwei Seiten, eine mit der Schaltfläche (modal-remote.html) und eine mit dem Inhalt, den ich beim Klicken auf die Schaltfläche anzeigen möchte (modal-target.html).

modal-remote.html:

<!DOCTYPE html> 
<html lang="en"> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal"> 
    Launch demo modal</a> 

</html>

Hier ist mein Code für das Ziel (oder remote) Seite

modal-target.html:

<html> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

    <div class="modal" id="myModal" 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"> 
     <p>The quick brown fox jumps over the lazy dog. </p> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary" id="save_btn">Save changes</button> 
     </div> 
    </div> 
</html>

Sie sind im selben Verzeichnis. Wenn ich auf den Knopf klicke, passiert nichts. Weiß jemand was ich falsch mache? Nicht-remote modale Dialoge funktionieren gut, ich kann einfach nicht herausfinden, wie Sie die Remote-Funktion verwenden.

Quelle

2012-10-19 Blake

Sie sollten die modal documentation sorgfältig lesen.

Wenn eine Remote-URL zur Verfügung gestellt wird, die Inhalte werden über jQuery Load-Methode und injiziert in den .modal Körper

Ihre Dateien sollten so geladen werden sein:

modal-remote.html:

<!DOCTYPE html> 
<html lang="en"> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal"> 
    Launch demo modal</a> 

<div class="modal hide" id="myModal" 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"> 
     <!-- content will be loaded here --> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary" id="save_btn">Save changes</button> 
     </div> 
    </div> 
</html>

modal-target.htm l:

<p>The quick brown fox jumps over the lazy dog. </p>

Quelle

2012-10-20 09:17:24 Sherbrow

, die funktioniert. Vielen Dank! – Blake

Hinweis: Mit bootstrap3 wird der Inhalt in ** die Wurzel des modalen Elements ** eingefügt. Siehe http://stackoverflow.com/a/18387625/553073 und [Dokument] (http://getbootstrap.com/javascript/#modals) – lastr2d2

ab Bootstrap v3.30, Fern Option ist veraltet. Siehe Here.

Die empfohlene Methode zur Verwendung von Remote-Inhalten ist die jquery.load()-Methode.

Beispiel:

$("modal").load("remote_content.html");

Quelle

2015-01-06 07:41:59 Chvoirre00

Remote-Modal-Dialog des Bootstrap funktioniert nicht

Antwort

Verwandte Themen