Question

您好我正在尝试将子页面显示为父页面中的模态页面。

我试图实现它，但它没有成功。

我能够在模态弹出窗口中调用子页面，但页面被重定向到子页面，并在那里以模态弹出窗口显示。

但实际上我想要的是在单击超链接时显示父页面模态弹出窗口中的子页面，而父页面仍然存在于模态弹出窗口的背景中。

任何人都可以请我指导解决方案。

这是我写的代码。

parent.html

<!DOCTYPE html>
<html>
<head>
<title>Parent Page </title>
</head>
<body >
 <a href="child.html" id = "parent"> Child  </a> 
</body>
</html>

child.html

<!DOCTYPE html>
<html>
<title> Child Page</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#child" ).dialog();
} );
</script>
</head>
<body>
<p id ="child"> This is child page</p>
</body>
</html>

修改

两个页面是项目的强制要求，我也试图在不使用Bootstrap的情况下实现这一目标。

Answer 1

根据您的评论我在这里更改答案，以便您可以看到。

 $('#linkID').click(function () {
       window.open("./childpage.html, "info6","resizable=no,scrollbars=1,status=yes,width=1000px,height=700px,menubar=0,toolbar=0");
 }

我不确定您是否需要在子页面上做任何事情来做出您想要的反应。但至少它会为你打开一个新窗口，我认为父母在后面。

如何使用jQuery在子页面中将子页面显示为模式弹出窗口

1 个答案:

根据您的评论我在这里更改答案，以便您可以看到。