Удаленный модальный диалог Bootstrap не работает

У меня возникают проблемы с использованием удаленных модальных диалогов из авика Twitter Bootstrap.

Я пытаюсь загрузить модальный диалог с содержимым с удаленной страницы html. У меня есть две страницы, одна из которых содержит кнопку (modal-remote.html) и одну, содержащую контент, который я хочу отображать при нажатии кнопки (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>

Вот мой код для целевой (или удаленной) страницы

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>

Они находятся в одном каталоге. Когда я нажимаю на кнопку, ничего не происходит. Кто-нибудь знает, что я делаю неправильно? Не удаленные модальные диалоги работают очень хорошо, я просто не могу понять, как использовать удаленную функцию.

Ответ 1

Вы должны внимательно прочитать модальную документацию.

Если предоставлен удаленный URL-адрес, содержимое будет загружено с помощью метода загрузки jQuery и введено в .modal-body

Ваши файлы должны быть более похожими:

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.html:

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

Ответ 2

Начиная с Bootstrap v3.30, параметр удаленный устарел. См. здесь.

Поэтому рекомендуемым способом использования удаленного контента является использование метода jquery.load().

Пример:

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