加載現有頁面/表單作爲按鈕單擊的模式

Question

我有一個現有網頁，其中包含用於提交問題的表單。

Existing Form Page

我想加載形式在首頁上放置模式/彈出當有人點擊一個按鈕。我不希望用戶不得不離開他們所在的頁面。他們應該能夠填寫表格並在點擊按鈕後提交。

我以爲我可以使用jQuery​​但我認爲我錯誤地使用它。

我已經在包含我的主頁的文件中放置了html/JQuery。

我不確定在​​，頁面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

你必須要確保該 '問題提交-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>