Открыть удаленный контент в модальном окне Bootstrap

Ответ 1

Во-первых, удаленные данные должны соответствовать одной и той же политике происхождения. Если вы этого не удовлетворяете, все после этого произойдет неудачно (если вы пытаетесь загрузить внешние URL-адреса, см. Внешний URL-адрес Twitter-загрузки Bootstrap).

Существует два способа загрузки загружаемого контента в модальный с помощью Bootstrap data-api. А именно, чтобы указать удаленный URL-адрес для загрузки в элементе <a>, который запускает модальное значение или указывает URL-адрес в модальной разметке.

В первом используется свойство href:

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

В последнем случае используется свойство data-remote:

<div class="modal fade hide" id="myModal" data-remote="/remote/url">...</div>

Преимущество указания его в элементе <a> состоит в том, что для каждого <a> можно использовать другой удаленный URL, но все же использовать только один модальный. Использование свойства data-remote может быть более выгодным в ситуациях, когда у вас есть несколько способов запуска модального контента с тем же контентом. Затем, независимо от того, что запускает его (даже JS-вызов), он будет последовательно предоставлять один и тот же удаленный контент, не дублируя эту информацию во всех методах вызова.

Вот демон с использованием последнего метода:

JSFiddle

Содержание в теле модальности - это удаленный html.

Ответ 2

Я проиграл рабочий пример здесь, на JSFiddle, который иллюстрирует, как использовать ссылку, чтобы открыть мода загрузочного мода, содержащую удаленный URL (одного и того же происхождения). Это почти дословно копия пасты из twitter bootstrap docs с некоторыми незначительными изменениями, чтобы заставить ее работать для удаленных URL.

Это просто указывает на атрибут href для URL-адреса, который вы хотите открыть, и атрибута data-target в DIV, который действует как модальное окно.

JSFIddle здесь

Тот же код здесь:

<!-- Button to trigger modal -->
<a href="/matt_hwy1/uEQEP/4/show/" data-target="#myModal" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" 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 Test Header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>​