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

Question

I have an existing webpage that contains a form for submitting questions.

Existing Form Page

I want to load that form as a modal/pop-up on my homepage when someone clicks a button.

I don't want the user to have to navigate away from the page they are on. They should be able to fill out the form and submit after clicking the button.

I thought I could use jQuery .load() but I think I am using it incorrectly.

I have placed the html/JQuery in the file containing my homepage.

I am not sure what to put as an argument in .load() , the page url or the file? I have tried both and neither work.

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

You have to make sure that the 'question-submit-form.php' is in the right directory. Also make sure to include jqueryUI script and css. The following works fine for me.

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