如何在 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()方法。