How to load another html inside index.html on click Javascript

Question

I have a index.html file which was a button. I have a modal.html file which has a custom modal built. I want to onclick event render modal.html inside index.html and close it normally. Can anyone help me with the pure Javascript function?

index.html below example

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

modal.html

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

Answer 1

There used to be frame tags that allowed you to load other html pages from other addresses. but HTML5 does not support it i guess.

you can create elements and add attributes to create the modal you wish dynamically using js, then find the modal-container element and append it as a child. then add listeners or queries to open and close it.

or use modals provided by Bootstrap

or use check this page which is trying to import and use .html files inside another html file

Answer 2

There are multiple ways how to render a .html file into another.

Using iframe tag

An inline frame is used to embed another document within the current HTML document.

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

Using jQuery

Specifically using jQuery's .get() method:

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

Using PHP

<?php include 'modal.html'?>

In your case, you could use the jQuery's $.get() method.