jquery-ui - 使用 jquery 在绝对位置附加整个表单

Question

只需要知道如何在单击按钮时附加整个 html。我正在尝试创建一个列表并将其显示在页面上。..................................................... ..................................................... ...................................................

@Html.BeginForm(null, null, FormMethod.Get, new { name = "vouchers", id = "vouchers" })
<h2>Voucher</h2>
<div class="whole">

<div class ="top">
    <label class ="lbl" >Assign a voucher Number </label>    
    <input type ="text" class="txt"/>

</div>
<div class="mid">
    <div class ="tdes">
    <table class="vtab">
             <tr class="heading">
            <td>
                Date 
            </td>
            <td>
                Name
            </td>
            <td>
                Category
            </td>
            <td>
                Amount
            </td>
            <td>
                To Account
            </td>         
            </tr>
         @foreach (var item in Model) {
            <tr class="rows">

            <td>
                @item.Date.ToShortDateString()              
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Per)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Amt)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AId)
            </td>
              </tr>
         }
    </table>
        </div>
</div>
<div class="bot">

    <input type ="submit" value="Save" class ="btn" id ="save" />
    <input type ="submit" value ="Print" class="btn" id ="print" />
</div>
</div>
}

Answer 1

How about using jQuery UI Dialog:

$("#vouchers").dialog({
    autoShow: false,
    // Other options
});
$("#somebutton").click(function() {
    $("#vouchers").dialog("show");
});