bootstrap 5 - 将动态内容加载到modal/offcanvas中 - 纯vaniall js和ajax - 无jquery

Question

如何将动态内容加载到 Bootstrap 5 模态中。 使用纯 vanilla js（没有 jquery！）。

我有例如索引.php。 我想打开一个带有按钮的模式。 该按钮应传递一个 URL（例如 /example.php）

然后模式应该打开并将 example.php 加载到模式主体中。

你能帮我吗？ 非常感谢！

我只找到旧的或 jquery 解决方案。但我不想将 jquery 与 Bootstrap 5 一起使用。

Answer 1

<script type="text/javascript">
function newSite() {
    var site = 'mysite.com';
    document.getElementById('myIframe').src =site;
}    
</script> 

在模态主体内添加 Iframe 且 src 为空

<iframe id="myIframe"></iframe>

然后在模态按钮上设置点击事件

<button onClick="newSite()" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>