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..