带有远程模态的Bootstrap 4
使用新的Twitter Bootstrap版本：Bootstrap 4 alpha，我无法使Modal在远程模式下工作。 它与Bootstrap 3完美配合。使用bootstrap 4我得到了弹出窗口，但是模型体没有被加载。 没有远程调用myRemoteURL.do来加载模型体。
码：
Model Title
发现问题： 他们已经删除了bootstrap 4中的远程选项
remote ：此选项自v3.3.0起已弃用，将在v4中删除。 我们建议使用客户端模板或数据绑定框架，或者自己调用jQuery.load。
我使用JQuery来实现这个删除的function。
$('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); });
适应您的需求
正如其他一些答案和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演示中加载模态
如果您使用Jquery slim版本（如所有Bootstrap 4文档和示例中所示），则加载function将失败
您需要使用完整版的Jquery
在Asp.NET MVC中，这对我有用
HTML
Edit item
jQuery的
行动
public PartialViewResult ActionName(int id) { // var model = ... return PartialView("_Modal", model); }