Question

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

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

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

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

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

我不确定在.load()，页面网址或文件中放置什么作为参数？我试过两个都没有工作。

<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>

在按钮单击时将现有页面/表单加载为模式

1 个答案: