[英]How to load another html inside index.html on click Javascript
I have a index.html file which was a button.我有一个 index.html 文件,它是一个按钮。 I have a modal.html file which has a custom modal built.我有一个 modal.html 文件,它内置了一个自定义模态。 I want to onclick
event render modal.html inside index.html and close it normally.我想onclick
事件渲染 modal.html 里面的 index.html 并正常关闭它。 Can anyone help me with the pure Javascript function?任何人都可以用纯 Javascript function 帮助我吗?
index.html below example index.html 下面的例子
<div id="modal-container">
// here I want to load content from modal.html
</div>
modal.html modal.html
<div>
//here is modal content
</div>
There used to be frame
tags that allowed you to load other html pages from other addresses.曾经有frame
标签允许您从其他地址加载其他 html 页面。 but HTML5 does not support it i guess.但我猜 HTML5 不支持它。
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.您可以创建元素并添加属性以使用 js 动态创建您希望的模式,然后找到 modal-container 元素和 append 作为子元素。 then add listeners or queries to open and close it.然后添加侦听器或查询以打开和关闭它。
or use modals provided by Bootstrap或使用Bootstrap提供的模态
or use check this page which is trying to import and use .html
files inside another html file或使用检查此页面,该页面试图在另一个 html 文件中导入和使用.html
文件
There are multiple ways how to render a .html
file into another.有多种方法可以将.html
文件渲染到另一个文件中。
iframe
tag使用iframe
标签An inline frame is used to embed another document within the current HTML document.内联框架用于在当前 HTML 文档中嵌入另一个文档。
<iframe src="modal.html"></iframe>
Specifically using jQuery's .get()
method:具体使用 jQuery 的.get()
方法:
$.get("modal.html", function(data) {
$("#modal-container").html(data);
});
<?php include 'modal.html'?>
In your case, you could use the jQuery's $.get()
method.在您的情况下,您可以使用 jQuery 的$.get()
方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.