javascript - 单击按钮时加载现有页面/表单作为模式

Question

我有一个现有网页，其中包含用于提交问题的表单。

Existing Form Page

当有人单击按钮时，我想将该表单作为模式/弹出窗口加载到我的主页上。

我不希望用户必须离开他们所在的页面。他们应该能够填写表单并在单击按钮后提交。

我以为我可以使用 jQuery .load() 但我认为我使用它不正确。

我已将 html/JQuery 放入包含我的主页的文件中。

我不确定在 .load() 中放置什么作为参数，页面 url 还是文件？我都尝试过，但都不起作用。

Homepage

<div id="PopUpForm">Pop Up Form</div>
<a href="#" onclick="openDialog();">Button</a>

 <script type="text/javascript">
function openDialog() {
   $("#PopUpForm").load('question-submit-form.php').dialog({modal: true});
} 
</script>

Answer 1

您必须确保“question-submit-form.php”位于正确的目录中。还要确保包含 jqueryUI 脚本和 css。以下内容对我来说效果很好。

<!--jqueryUI css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<!-- body -->

<div id="PopUpForm">Pop Up Form</div>
<a href="#" onclick="openDialog();">Button</a>


<!-- include jquery and jquery ui and jqueryUI js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript">
   function openDialog() {
     $("#PopUpForm").load('question-submit-form.php').dialog({model:true});
   } 
</script>