Все, что мне нужно, - это простой пример того, как открыть удаленный контент в модальном окне Twitter Bootstrap.
Я использую Bootstrap v2.0.4, и я просто не могу заставить его работать. Я могу открыть обычные модальные окна, но я не могу заставить его открывать удаленный файл внутри него.
Во-первых, удаленные данные должны соответствовать одной и той же политике происхождения. Если вы этого не удовлетворяете, все после этого произойдет неудачно (если вы пытаетесь загрузить внешние 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-вызов), он будет последовательно предоставлять один и тот же удаленный контент, не дублируя эту информацию во всех методах вызова.
Вот демон с использованием последнего метода:
Содержание в теле модальности - это удаленный html.
Я проиграл рабочий пример здесь, на JSFiddle, который иллюстрирует, как использовать ссылку, чтобы открыть мода загрузочного мода, содержащую удаленный URL (одного и того же происхождения). Это почти дословно копия пасты из twitter bootstrap docs с некоторыми незначительными изменениями, чтобы заставить ее работать для удаленных URL.
Это просто указывает на атрибут href для URL-адреса, который вы хотите открыть, и атрибута data-target в DIV, который действует как модальное окно.
Тот же код здесь:
<!-- 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>