La finestra di dialogo modale remota di Bootstrap non funziona

Sto riscontrando problemi nell'utilizzo delle finestre di dialogo modali remote da Twitter Bootstrap api.La finestra di dialogo modale remota di Bootstrap non funziona

Sto provando a caricare una finestra di dialogo modale con i contenuti di una pagina html remota. Ho due pagine, una contenente il pulsante (modal-remote.html) e una contenente il contenuto che desidero visualizzare quando si fa clic sul pulsante (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>

Ecco il mio codice per la destinazione (o remoto) pagina

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>

Sono nella stessa directory. Quando clicco sul pulsante, non succede nulla. Qualcuno sa cosa sto sbagliando? I dialoghi modali non remoti funzionano bene, non riesco proprio a capire come utilizzare la funzione remota.

fonte

2012-10-19 Blake

Leggere attentamente lo modal documentation.

Se viene fornito un URL remoto, il contenuto sarà caricato tramite il metodo del carico di jQuery e iniettati nel .modal-corpo

I file dovrebbero essere più così:

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>

fonte

2012-10-20 09:17:24 Sherbrow

che funziona. Grazie! – Blake

Nota ora con bootstrap3, il contenuto verrà inserito nella ** radice dell'elemento modale **. Vedi http://stackoverflow.com/a/18387625/553073 e [documento] (http://getbootstrap.com/javascript/#modals) – lastr2d2

partire da Bootstrap v3.30, remoto opzione è obsoleto. Vedi Here.

Quindi il modo consigliato per utilizzare il contenuto remoto è utilizzare il metodo jquery.load().

Esempio:

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

fonte

2015-01-06 07:41:59 Chvoirre00

La finestra di dialogo modale remota di Bootstrap non funziona

risposta

Problemi correlati