如何使用fancybox打开弹出的html表单

Question

我有一个父html页面，在那里我有打开对话框(子页面-表单)的按钮，并从对话框中获取输入，然后返回到父页面并使用这些值。

HTML按钮：

<div class="fancybox">
<input type="button" id="opener" value="X" name="1"></td>
</div>

JQUERY：

$(document).ready(function() {
$(".fancybox").fancybox();
});

我正在尝试打开的div标记为对话框：

<div id="dialog" title="Basic dialog">
Weight<input type="text" id="wt" name="weight"  title="Weight"/>
Length<input type="text" id="lgt" name="length"  title="Length"/>
Width<input type="text" id="wdt" name="width"  title="Width"/> 
Height<input type="text" id="ht" name="height"  title="Height"/>
<ul id="categories">
  <li id="cat-1">
  <img src="Images/download.jpg" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(1,1,1,1)">
  </li>
  <li id="cat-2">
   <img src="Images/Fedex_express.gif" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(2,2,2,2)">
  </li>
  <li id="cat-3">
   <img src="Images/download.jpg" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(3,3,3,3)">
  </li>
  <li id="cat-4">
   <img src="Images/Fedex_express.gif" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(4,4,4,4)">
  </li>
</ul>
<button name="OK" onclick="PopulateForm()">OK</button>

</div>

Answer 1

试试这条路

<input type="button" href="#dialog" id="opener" value="X" name="1"></td>

脚本

$(document).ready(function() {
    $("#opener").fancybox();
});

DEMO