jquery:具有远程Modal的Bootstrap 4

发现了问题：他们在引导程序4中删除了远程选项

remote ：此选项从v3.3.0开始不推荐使用，并将在v4中删除.我们建议改为使用客户端模板或数据绑定框架，或者自己调用jQuery.load。

我使用JQuery来实现此已删除的功能。

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

根据官方文档，我们可以执行以下操作（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's 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);
});

Adapt to your needs

正如其他答案和Bootstrap文档所指出的那样， Bootstrap 4 需要处理 show.bs.modal 事件，以将内容加载到模式中.可用于从HTML字符串或远程URL加载内容.这是 working example ...

$('#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);
       }
  });

Ajax演示中的Bootstrap 4加载模式

在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>

Action

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

如果使用Jquery slim版本（如所有Bootstrap 4文档和示例中一样），则加载功能将失败

您需要使用完整版的Jquery