simple jquery popup example code

Simple jquery popup which generally use to show or to perform some operations as supplementary operations.

You will get the popup as like below.

This popup doesn’t need any plugin, you only need to take the reference of the

Code open ajax popup in asp.net

ASP.net code to place the model pop up in the html code.
Before wrinting the below code you need to import the ajaxcontrol toolkit dll into your application then you need to register it;

<!-------------test -- >
<-------------------->

In the below  code there is model popup which is having one button and text box where user can enter email address.

<@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit">

Below code attach the model popup with the panel as assign to it as their it is PopupControlID="Panel1".

<asp:Panel ID="Panel1" runat="server" Style="display: none" Width="450px" CssClass="thinBorder">

            <asp:Panel ID="Panel3" runat="server" Width="450px" Style="height: 30px" CssClass="tableHeader">

                <div>

                    <table width="100%">

                        <tr>

                            <td align="left" style="cursor: move;">

                                Enter Email Id

                            </td>

                            <td align="right">

                                <img id="CancelButton" src="Images/cancel.gif" alt="Cancle" />

                            </td>

                        </tr>

                    </table>

                </div>

            </asp:Panel>

            <div>

                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">

                    <Triggers>

                        <asp:AsyncPostBackTrigger ControlID="OkButton" EventName="Click" />

                    </Triggers>

                    <ContentTemplate>

                        <table cellpadding="0" cellspacing="0" id="tblSendmailText" runat="server"class="sectionBg1"

                            border="0" width="450px">

                            <tr>

                                <td colspan="2" style="height: 5px">

                                </td>

                            </tr>

                            <tr>

                                <td colspan="2" style="height: 5px">

                                    <asp:Label ID="lblMessage" runat="server"></asp:Label>

                                </td>

                            </tr>

                            <tr>

                                <td colspan="2" style="height: 5px">

                                    [Thanks to share the information. Please enter email Id in text Area ]

                                </td>

                            </tr>

                            <tr>

                                <td colspan="2" style="height: 5px">

                                </td>

                            </tr>

                            <tr>

                                <td align="left" width="90px">

                                    Email ID ::

                                </td>

                                <td align="left" width="300px">

                                    <asp:TextBox ID="txtEmail" runat="server"Width="189px"></asp:TextBox>

                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"ValidationGroup="A1"

                                        ControlToValidate="txtEmail"ErrorMessage="*"></asp:RequiredFieldValidator>

                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator2"runat="server" ValidationGroup="A1"

                                        ErrorMessage="Invalid Emailid!!" ControlToValidate="txtEmail"ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

                                </td>

                            </tr>

                            <tr>

                                <td colspan="2" style="height: 5px">

                                </td>

                            </tr>

                            <tr>

                                <td align="left">

                                </td>

                                <td align="left">

                                    <asp:Button runat="server" OnClick="btnSubmit_Click" ValidationGroup="A1"Text="Submit"

                                        CssClass="buttonStyle" ID="OkButton" />

                                </td>

                            </tr>

                        </table>

                    </ContentTemplate>

                </asp:UpdatePanel>

            </div>

        </asp:Panel>

        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lnkSendmail"

            PopupControlID="Panel1" BackgroundCssClass="modalBackground" CancelControlID="CancelButton"

            DropShadow="false" OnCancelScript="UserRegistionClear1();" OnLoad="ModalPopupExtender1_Load" />

 Below code attach the model popup with the panel as assign to it as their it is PopupControlID="Panel1"

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lnkSendmail"

            PopupControlID="Panel1" BackgroundCssClass="modalBackground" CancelControlID="CancelButton"

            DropShadow="false" OnCancelScript="UserRegistionClear1();" OnLoad="ModalPopupExtender1_Load" />

to Open the model popup we need to call that in one of the event in the any of the control like below. it assign with it by  TargetControlID="lnkSendmail"

 <asp:LinkButton runat="server" ID="lnkSendmail" ><img src="Images/mail_icon.gif"   alt="Send Mail"/></asp:LinkButton>

Ajax model popup will appear like