Zdalne okno dialogowe modemu zdalnego Bootstrapa nie działa

Mam problemy z korzystaniem ze zdalnych dialogów modalnych z apletu Twitter Bootstrap.Zdalne okno dialogowe modemu zdalnego Bootstrapa nie działa

Próbuję załadować modalne okno dialogowe z zawartością ze zdalnej strony html. Mam dwie strony, jedną zawierającą przycisk (modal-remote.html) i jedną zawierającą treść, którą chcę wyświetlić po kliknięciu przycisku (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>

Oto mój kod na tarczy (lub zdalnym) stronie

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>

Są w tym samym katalogu. Kiedy klikam przycisk, nic się nie dzieje. Czy ktoś wie, co robię źle? Niezamienne dialogi modalne działają dobrze, po prostu nie mogę wymyślić, jak korzystać z funkcji zdalnego.

Źródło

2012-10-19 Blake

Powinieneś uważnie przeczytać modal documentation.

Jeśli zdalnego adresu URL jest, zawartość zostanie załadowany przez metody load jQuery i wstrzykuje do .modal-ciała

Pliki powinny być więcej tak:

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>

Źródło

2012-10-20 09:17:24 Sherbrow

że działa. Dzięki! – Blake

Zwróć teraz uwagę na bootstrap3, treść zostanie wprowadzona do ** katalogu głównego elementu modalnego **. Zobacz http://stackoverflow.com/a/18387625/553073 i [dokument] (http://getbootstrap.com/javascript/#modals) – lastr2d2

Od Bootstrap v3.30, zdalnego opcja nie jest zalecane. Zobacz Here.

Zalecanym sposobem użycia zdalnej zawartości jest użycie metody jquery.load().

Przykład:

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

Źródło

2015-01-06 07:41:59 Chvoirre00

Zdalne okno dialogowe modemu zdalnego Bootstrapa nie działa

Odpowiedz

Powiązane problemy