如何在 Bootstrap 4 Modal 中加载远程内容？

在 Bootstrap 4 Modal 中加载远程内容

Bootstrap 4 的出现给 Modal 中的远程数据加载功能带来了重大变化。与 Bootstrap 3 相比，Bootstrap 4 弃用了远程选项，引用了使用客户端模板或数据绑定框架的建议。

使用 Bootstrap 4 Modal 检测到的问题：

用户报告在使用新的 Bootstrap 4 alpha 版本在 Modal 中加载远程内容时遇到问题。当弹出窗口出现时，模型主体保持为空，表明未发出从提供的 URL 加载内容的请求。

使用 jQuery 的解决方案：

要恢复远程加载功能，您可以使用以下命令手动实现jQuery:

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

说明

此解决方案使用 jQuery 的 load() 方法将指定远程 URL 中的内容动态加载到 .modal-body 元素中目标模态。单击事件侦听器绑定到具有 data-toggle="modal" 属性的所有元素，确保该功能应用于应用程序中的所有模态。

以上是如何在 Bootstrap 4 Modal 中加载远程内容？的详细内容。更多信息请关注PHP中文网其他相关文章！