Home
CSS ASP.Net Absolute Basic Overlay Box
The is the ASPX File
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="xxx.aspx.cs" Inherits="xxx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.Layer2{
visibility:hidden;
position:absolute;
top:20px;
border-style:groove;
border-radius:10px;
padding:10px;
background-color:aqua;
border-width:3px;
}
</style>
<script>
function ShowExtra() {
document.getElementById("Layer2").style.visibility = "visible"
}
function ShowLess() {
document.getElementById("Layer2").style.visibility = "hidden"
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="Layer1" id="Layer1">
Hello
<br />
Please enter ya name
<br />
<asp:TextBox ID="NameF" runat="server" />
<br />
And your age
<br />
<asp:TextBox ID="AgeF" textmode="Number" runat="server" />
<br />
<input type="button" onclick="ShowExtra()" value="More Info" />
<br />
<br />
<asp:Button ID="AccountUpload" Text="Submit" OnClick="AccountUpload_Click" runat="server" />
<br />
<br />
<br />
<br />
<asp:Literal ID="MyLit" runat="server" />
</div>
<div class="Layer2" id="Layer2">
Address
<br />
<asp:TextBox ID="AddressF" TextMode="MultiLine" Width="300" Height="200" runat="server" />
<br />
<input type="button" onclick="ShowLess()" value="Done" />
</div>
</form>
</body>
</html>
And the code behind file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Text;
public partial class xxx : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protected void AccountUpload_Click(object sender, EventArgs e)
{
string qwe = NameF.Text + "<br />" + AgeF.Text + "<br />" + AddressF.Text;
MyLit.Text = qwe;
}
}
Reader's Comments
Name
Comment
Add a RELEVANT link (not required)
Upload an image (not required)
Uploading...
Home