Bootstrap 4 с дистанционным модулем

Ответ 1

Обнаружена проблема: Они удалили удаленный вариант в bootstrap 4

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

Я использовал JQuery для реализации этой удаленной функции.

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });  

Ответ 2

Согласно официальной документации, мы можем выполнить следующее (https://getbootstrap.com/docs/4.1/components/modal):

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)
})

Поэтому я считаю, что это лучший подход:

$('#modal_frame').on('show.bs.modal', function (e) {
    $(this).find('.modal-content').load(e.relatedTarget.href);
});

Адаптируйте свои потребности

Ответ 3

Как показывают некоторые другие ответы и документы Bootstrap, Bootstrap 4 требует обработки события show.bs.modal для загрузки контента в модальный. Это можно использовать для загрузки содержимого из строки HTML или из удаленного URL-адреса. Вот рабочий пример...

$('#theModal').on('show.bs.modal', function (e) {

    var button = $(e.relatedTarget);
    var modal = $(this);

    // load content from HTML string
    //modal.find('.modal-body').html("Nice modal body baby...");

    // or, load content from value of data-remote url
    modal.find('.modal-body').load(button.data("remote"));

});

Bootstrap 4 Удаленная URL-демонстрация

Другой вариант - открыть модальный, как только данные будут возвращены из вызова Ajax...

  $.ajax({
       url: "http://someapiurl",
       dataType: 'json',
       success: function(res) {

           // get the ajax response data
           var data = res.body;
           // update modal content
           $('.modal-body').text(data.someval);
           // show modal
           $('#myModal').modal('show');

       },
       error:function(request, status, error) {
           console.log("ajax call went wrong:" + request.responseText);
       }
  });

Bootstrap 4 Загрузка модала из Ajax Demo

Ответ 4

Если вы используете тонкую версию JQuery (как и во всех документах и примерах Bootstrap 4), функция загрузки не будет работать

Вам нужно использовать полную версию JQuery

Ответ 5

В Asp.NET MVC это работает для меня

HTML

<a href="#" onclick="Edit(1)">Edit item</a>
<div class="modal" id="modalPartialView" />

JQuery

<script type="text/javascript">
        function Edit(id)
        {
            $.ajax({
                url: "@Url.Action("ActionName","ControllerName")",
                type: 'GET',
                cache: false,
                data: {id: id},
            }).done(function(result){
                $('#modalPartialView').html(result)
                $('#modalPartialView').modal('show') //part of bootstrap.min.js
            });
        }
<script>

действие

public PartialViewResult ActionName(int id)
{
   // var model = ...
   return PartialView("_Modal", model);
}

Ответ 6

Этот процесс загружает текущую динамику. data remote = "remoteContent.html"

<!-- Link trigger modal -->
<a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
    Launch Modal
</a>
This trick :  data-remote="remoteContent.html"
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>