jquery - Bootstrap 模式从外部文件加载整个 HTML

Question

使用:Bootstrap 4.1.3

这是一个解决方案，但这并不正是我正在寻找的: Bootstrap Modal Dynamic Content

我从外部文件获取内容(整个模态 html)，然后我需要将其显示为模态。

如何在模态中显示数据

$.get("test.html", function(data) {
    ???
});

我试图避免这种替代方法，在这种方法中，我可以将 div 附加到正文，将 data 放入其中，然后执行模态。

$.get("test.html", function(data) {
    //$('<div />', { id: 'holdy' }).appendTo('body');

    var $holdyDiv = $('<div />').appendTo('body');
    $holdyDiv.attr('id', 'holdy');

    //append data 
    $holdyDiv.innerHtml(data);

    //do modal
    $('#divInData').modal('show');  
});

忘了提及，此调用是在页面加载完成后发生的。

Answer 1

您应该使用 jQuery $.load 而不是 $.get ，它允许您指定远程模式的选择器。那么您需要做的就是:

$('body').load("test.html #myModal",function(){
   $('#myModal').modal();
});

无论哪种方式，模态 HTML都必须添加到加载模态的“主机”页面的 DOM 中。

演示:
https://www.codeply.com/go/AQazBWdsrZ (“主机”页面)
https://www.codeply.com/go/sE77hS1hHs (“远程”页面 - 仅模式 HTML)