در این مقاله به نحوه ایجاد Popup توسط Jquery خواهیم پرداخت

 نحوه ساخت  Popup   توسط Jquery :

در صفحه html خود یک جدول بسازید و داخل آن Textbox و یک Button اضافه کنید و یک Div  بسازید و مقدار Display آنرا None قرار دهید و id آنرا dialog قرار دهید:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        Name:
    </td>
    <td>
        <input type="text" id="txtName" value="" />
    </td>
</tr>
<tr>
    <td>
        <input type="button" id="btnSubmit" value="Submit" />
    </td>
</tr>
</table>
<div id="dialog" style="display: none">
</div>

به منظور نشان دادن عملکرد از WebMethod استفاده میکنیم که  به آسانی نام ارسالی توسط jquery  بوسیله ajax پاسخ داده میشود اما این راه حل تنها به Asp.Net  محدود نیست و می توان آنرا به راحتی برای فن آوری های دیگر نیز به کار برد.

[System.Web.Services.WebMethod]
public static string SendParameters(string name)
{
    return string.Format("Name: {0}", name);
}

در قسمت پایین صفحه خود آدرس های jquery را اضافه کنید و سپس یک تابع برای باز کردن Popup و کنترل رویداد کلیک دکمه که زمالنی که روی آن کلیک شد توسط jquery و ajax  با  webmethod تعامل برقرار می کند :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        title: "Details",
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });
    $("#btnSubmit").click(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/SendParameters",
            data: "{name: '" + $("#txtName").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                $("#dialog").html(r.d);
                $("#dialog").dialog("open");
            }
        });
    });
});
</script>