如何使用fancybox弹出html表单

时间:2013-12-28 11:10:28

标签: javascript jquery html

我有一个父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>

1 个答案:

答案 0 :(得分:0)

试试这种方式

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

脚本

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

DEMO