How to Use Lytebox in ASP.NET
Let’s Use Lytebox
Lytebox is used instead of a pop up window or a new tab. Because Lytebox opens a new page within the same window, it is able to bypass pop-up blockers. Lytebox can be used for many things, such as photo gallery to enlarge a specific image or to show a sign-up page. In this article we will be creating a new project and using a sign-up page within Lytebox.
Step 1. Create a new web site project within visual studio.
Step 2. Download lytebox.zip file from here.
https://www.brighthub.comhttps://images.brighthub.com/media/4DA880_lytebox.zip
Step 3. Extract lytebox folder from the zip file and place it in the root folder of your web site.
Step 4. You should already have default.aspx file, open up that file and view the source code.
Step 5. Enter the below code within the Page_Load event of default.aspx. Please note that the folder Lytebox is within the root of your web site.
//setting lytebox
this.Page.ClientScript.RegisterClientScriptInclude(“lytebox”, base.ResolveUrl(“Lytebox/lytebox.js”));
Control ctrl = this.Page.Header.FindControl(“lyteboxCss”);
if (ctrl == null)
{
HtmlLink lnk = new HtmlLink();
lnk.ID = “lyteboxCss”;
lnk.Href = “Lytebox/lytebox.css”;
lnk.Attributes.Add(“rel”, “stylesheet”);
lnk.Attributes.Add(“type”, “text/css”);
this.Page.Header.Controls.Add(lnk);
}
//end lytebox
The code above is looking for attribute “rel” within the entire default.aspx page and adding proper lytebox css and javascript URL on the run time.
Step 6. View the design section of the default.aspx page and add some text (sample text) and below the text create one hyper link.
<a href=“Signup.aspx” rel=‘lyteframe’>Click here to signup</a>
Notice I used rel=’lyteframe’ this is used by step 5 above. And also notice the “Signup.aspx” page you are about to create in Step 7.
Step 7. Now we have to create a new page so our lytebox can load it within the default.aspx page. Right click on your project name and add a new web page and name it ‘Signup.aspx’
Step 8. Add anything within this page, I added a html table and two fields, name and the email address with a button. You can add text, images or tables, its totally up to you. If you would like to add a table, here is the code,
<tr>
<td>Name:</td>
<td><asp:TextBox ID=“txtName” runat=“server”></asp:TextBox></td>
</tr>
<tr>
<td>Email:</td>
<td><asp:TextBox ID=“txtEmail” runat=“server”></asp:TextBox></td>
</tr>
<tr>
<td> </td>
<td><asp:Button ID=“btnSend” runat=“server” Text=" Sign up now" /></td>
</tr>
</table>
Step 9. Run / load the default.aspx page in your browser and you should see the sample text (if any) you added alone with the link we created in the step 6. “Click here to signup”
Step 10. When you click on the link, you should see a lytebox window comes up and it will load signup.aspx page within itself. See the screen shot attached.
You can also modify the CSS file within Lytebox/lytebox.css if you would like the lytebox background color to match your web page / web site.
Click here to download the sample project created for this article.