如何在 index.html 中加载另一个 html 点击 Javascript

Question

我有一个 index.html 文件，它是一个按钮。 我有一个 modal.html 文件，它内置了一个自定义模态。 我想onclick事件渲染 modal.html 里面的 index.html 并正常关闭它。 任何人都可以用纯 Javascript function 帮助我吗？

index.html 下面的例子

<div id="modal-container">
// here I want to load content from modal.html
</div>

modal.html

<div>
//here is modal content
</div>

Answer 1

曾经有frame标签允许您从其他地址加载其他 html 页面。 但我猜 HTML5 不支持它。

您可以创建元素并添加属性以使用 js 动态创建您希望的模式，然后找到 modal-container 元素和 append 作为子元素。 然后添加侦听器或查询以打开和关闭它。

或使用Bootstrap提供的模态

或使用检查此页面，该页面试图在另一个 html 文件中导入和使用.html文件

Answer 2

有多种方法可以将.html文件渲染到另一个文件中。

使用iframe标签

内联框架用于在当前 HTML 文档中嵌入另一个文档。

<iframe src="modal.html"></iframe>

使用 jQuery

具体使用 jQuery 的.get()方法：

$.get("modal.html", function(data) {
   $("#modal-container").html(data);
});

使用 PHP

<?php include 'modal.html'?>

在您的情况下，您可以使用 jQuery 的$.get()方法。