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

【问题标题】：How to display child page as a modal popup in parent page using jQuery如何使用jQuery在父页面中将子页面显示为模式弹出窗口
【发布时间】：2018-04-12 07:33:18
【问题描述】：

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

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

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

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

谁能指导我解决问题。

这是我写的代码。

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 的情况下实现这一点。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

根据您的评论，我在此处更改答案，以便您查看。

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

我不确定您是否需要子页面本身上的任何内容来按照您想要的方式做出反应。但至少它为你打开了一个新窗口，我认为父母在后面。

【讨论】：

2 个页面是强制性的，实际上它们是由自定义模块主题中的回调函数调用的 drupal tpl 页面。
我已经为你更新了答案。这是我们做到这一点的方法之一。
但页面仍在重定向到新页面，并且没有显示模式弹出窗口。您是否在使用任何其他库。