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

Question

使用：Bootstrap 4.1.3

这是一种解决方案，但这并不完全是我正在寻找的： Bootstrap Modal Dynamic Content

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

如何data在模态中显示

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

我试图避免这种替代方法，我可以将一个 div 附加到 body，放入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

You should use jQuery $.load instead of $.get which allows you to specify the selector for the remote modal. Then all you need to do is:

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

Either way the Modal HTML must be added to the DOM of the "host" page that's loading the modal.

Demo:
https://www.codeply.com/go/AQazBWdsrZ ("host" page)
https://www.codeply.com/go/sE77hS1hHs ("remote" page - modal HTML only)