带有远程模态的Bootstrap 4

Question

使用新的Twitter Bootstrap版本:Bootstrap 4 alpha,我无法使Modal在远程模式下工作.它与Bootstrap 3完美配合.使用bootstrap 4我得到了弹出窗口,但是模型体没有被加载.没有远程调用myRemoteURL.do来加载模型体.

码:

<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>

<!-- Model -->
<div class="modal fade" id="myModel" 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>
                <h3 class="modal-title" id="myModalLabel">Model Title</h3>
            </div>
            <div class="modal-body">
                <p>
                    <img alt="loading" src="resources/img/ajax-loader.gif">
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>

Answer 1

发现问题:他们已经删除了bootstrap 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"));
    });  

Answer 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'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);
});

适应您的需求

Answer 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);
       }
  });

来自 Ajax 演示的 Bootstrap 4 加载模式