it-swarm.com.ru

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

У меня есть страница с ссылками на внутренние страницы, которые мне нужно открыть в загрузочном модальном DIV. Проблема в том, что кажется, что использование последней версии Bootstrap v3 в сочетании с jQuery v2.1.4 просто не работает, когда дело доходит до загрузки контента таким способом. Я прочитал множество учебных пособий о создании модалов с помощью Bootstrap и о том, как удаленный контент постепенно сокращается. Но нужно сделать так, чтобы это работало с jQuery, а может и нет.

Теория заключается в том, что когда вы нажимаете

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

предполагается, что содержимое data-load-remote должно быть прочитано и введено в div с классом modal-body

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Event</h4>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>

Тем не менее, когда я пытаюсь этот пример с jQuery v2.1.4 и BS v3.3 +, то он открывает модальное окно с серым фоном, но все стили модального окна исчезают. Это означает, что кажется, что он отображает только div модального тела, но модальный заголовок, красивая модальная рамка и нижние кнопки в div модального нижнего колонтитула вообще не отображаются. Единственный способ закрыть окно - щелкнуть за пределами модального окна .  partial modal window

Я нашел примеры того, как открыть удаленные URL-адреса таким образом, но все они используют устаревшую версию начальной загрузки, а не версию, с которой я работаю. Кто-нибудь может пролить свет на это, пожалуйста?

22
vanarie

Поэтому в 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'));
});
37
Kijan Maharjan

From документы Bootstrap о параметре remote;

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

Если предоставлен удаленный URL-адрес, контент будет загружен один раз с помощью метода jQuery load и вставлен в .modal-content div. Если вы используете 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 программно, что означает, что вы можете сохранять функциональность кнопок «dismiss» и/или других кнопок по мере необходимости.

Для этого вы можете использовать тег данных с URL-адресом от кнопки, которая открывает модальное окно, и использовать событие 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);
});
14
worldofjr

e.relatedTarget.data('load-url'); не будет работать
use dataset.loadUrl  

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

Другая точка зрения на ту же проблему в стороне от 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.

1
Dan

При использовании ответа @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, и после использования этого метода он работает без проблем.

0
Marcin Nabiałek