Ajax Modal Popup In Asp.net

05:06
Here i am explaining how to use ajax modal pop up extender in asp.net.
1.Create asp.net empty website and then add one webform to the web site.
2.then write the below code in .aspx page.


<head runat="server">
    <title>Ajax Modal Popup Sample</title>
    <style type="text/css">
        .popup
        {
            position: fixed;
            z-index: 100;
            top: 0px;
            left: 0px;
            background-color: #000;
            filter: alpha(opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:LinkButton ID="lbtnsignup" runat="server" Text="SignUp"></asp:LinkButton>
    </div>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lbtnsignup"
        PopupControlID="pnlmodal" BackgroundCssClass="popup" CancelControlID="lbtnclose">
    </asp:ModalPopupExtender>
    <asp:Panel ID="pnlmodal" runat="server" Style="display: none; width:50%;">
        <div style="background-color: Gray;">
            <asp:LinkButton ID="lbtnclose" runat="server" Style="float: right; padding-right: 10px;
                text-decoration: none;">x</asp:LinkButton>
            <br />
            <table align="center">
                <tr>
                    <td colspan="2">
                        Registration Form
                    </td>
                </tr>
                <tr>
                    <td>
                        Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtname" runat="server">
                        </asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Password:
                    </td>
                    <td>
                        <asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Confirm Password:
                    </td>
                    <td>
                        <asp:TextBox ID="txtconpwd" runat="server" TextMode="Password"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Mobile No:
                    </td>
                    <td>
                        <asp:TextBox ID="txtmno" runat="server" MaxLength="10"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Email Id:
                    </td>
                    <td>
                        <asp:TextBox ID="txtemailid" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Location:
                    </td>
                    <td>
                        <asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <asp:Button ID="btnsubmit" runat="server" Text="Submit" />
                        <asp:Button ID="btncancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
        </div>
    </asp:Panel>
    </form>
</body>
3. then run the page and see what was happining thats it simple...

1 comments :

Jquery Fancy Box in Asp.Net

04:39
Here I am explaining how to use jquery fancy box in asp.net
1.Create asp.net website in visual studio. and then add web form to the web site.
2.then design the web form like below.
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinkButton ID="lbtn" runat="server" Text="LinkButton"></asp:LinkButton>
    </div>
    <div style="display: none;">
        <div id="inline">
            <asp:DropDownList ID="ddlshow" runat="server" OnSelectedIndexChanged="ddlshow_SelectedIndexChanged"
                AutoPostBack="true">
                <asp:ListItem Value="0">Unrated</asp:ListItem>
                <asp:ListItem Value="1">Contacted</asp:ListItem>
                <asp:ListItem Value="2">Presented</asp:ListItem>
                <asp:ListItem Value="3">Negatiotion</asp:ListItem>
                <asp:ListItem Value="4">Slod</asp:ListItem>
                <asp:ListItem Value="5">Delivered</asp:ListItem>
                <asp:ListItem Value="6">NI/NA</asp:ListItem>
            </asp:DropDownList>
            <asp:Button ID="btn" runat="server" Text="ABC" OnClick="btn_Click" />
        </div>
    </div>
    </form>
</body>

3.then download the jquery fancy from google and then add these js files to our web form like below. in head section of the webform. and write the java script code for fancy box.


<head runat="server">
    <title>Jquery Fancy Box Sample</title>
    <script src="jquery.fancybox-1.3.4/jquery-1.4.3.min.js" type="text/javascript"></script>
    <link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet"
        type="text/css" />
    <script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('a[id$=lbtn]').fancybox({
                'width': '60%',
                'height': '50',
                'titlePosition': 'inside',
                'transitionIn': 'none',
                'transitionOut': 'none',
                'href': '#inline'
            });
        })
   
    </script>
</head>
  .4.then run the page...enjoy Happy Coding Have a nice day..


0 comments :

Subscribe to: Posts ( Atom )