JQuery, чтобы открыть Bootstrap v3 modal удаленного URL

Ответ 1

Поэтому в jquery мы можем загрузить атрибут href с помощью функции load. Таким образом, мы можем использовать URL-адрес в теге <a> и загрузить его в modal-body.

<a  href='/site/login' class='ls-modal'>Login</a>

//JS script
$('.ls-modal').on('click', function(e){
  e.preventDefault();
  $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});

Ответ 2

Из документации Bootstrap об remote опции;

Эта опция устарела начиная с версии 3.3.0 и была удалена в версии 4. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или инфраструктуру привязки данных или вызывать jQuery.load самостоятельно.

Если .modal-content удаленный URL-адрес, контент будет загружен один раз с помощью метода load jQuery и .modal-content div .modal-content. Если вы используете data-api, вы можете использовать атрибут href для указания удаленного источника. Пример этого показан ниже:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Это .modal-content div, а не .modal-body. Если вы хотите поместить контент в .modal-body то вам нужно сделать это с помощью пользовательского javascript.

Поэтому я бы вызвал jQuery.load программно, то есть вы можете сохранить функциональность кнопок " jQuery.load и/или других кнопок по мере необходимости.

Для этого вы можете использовать тег данных с URL-адресом от кнопки, открывающей модальное show.bs.modal, и использовать событие show.bs.modal для загрузки содержимого в div .modal-body.

HTML-ссылка/кнопка

<a href="#" data-toggle="modal" data-load-url="remote.html" data-target="#myModal">Click me</a>

Jquery

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});

Ответ 3

e.relatedTarget.data('load-url'); не будет работать
используйте dataset.loadUrl

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = e.relatedTarget.dataset.loadUrl;
    $(this).find('.modal-body').load(loadurl);
});

Ответ 4

Другая перспектива с той же проблемой от Javascript и использования php:

<a data-toggle="modal" href="#myModal">LINK</a>

<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
    <div class="modal-dialog" style="text-align: left;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <?php include( 'remotefile.php'); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

и поместите в файл remote.php ваш основной источник HTML.

Ответ 5

Если вы используете @worldofjr ответ в jQuery, вы получаете ошибку:

e.relatedTarget.data не является функцией

вы должны использовать:

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});

Не то, что e.relatedTarget, если оно завершено $(..)

Я получал ошибку в последнем Bootstrap 3, и после использования этого метода он работал без каких-либо проблем.

Ответ 6

В bootstrap-3.3.7.js вы увидите следующий код.

if (this.options.remote) {
  this.$element
    .find('.modal-content')
    .load(this.options.remote, $.proxy(function () {
      this.$element.trigger('loaded.bs.modal')
    }, this))
}

Таким образом, начальная загрузка собирается заменить удаленный контент на элемент <div class="modal-content">. Это поведение по умолчанию для фреймворка. Таким образом, проблема заключается в самом удаленном контенте, он должен содержать <div class="modal-header">, <div class="modal-body">, <div class="modal-footer">.