Asp.net modules
  • Home
  • c# Modules
  • Web Design
    • Html
    • Css
    • Java Script
  • Bootstrap
  • Sql
    • Queries
    • Stored Procedures
  • About Me
    • About Myself
    • My Projects
    • My Resume
  • Photo Gallery

Wednesday, February 3, 2016

how to make a popup

 Unknown     10:39 AM     js     No comments   

 Intoduction :- 

Hii Friends...

Today I explain how to make a popup with the help of java script in asp.net . Here i make a login form and show it in a popup box.

 

 


HTML & CSS Code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lightbox.aspx.cs" Inherits="lightbox" %>

<html>
<head>
<title>LIGHTBOX EXAMPLE HERE</title>
<style type="text/css">
.black_overlay{
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display:none;
position: absolute;
top: 25%;
left: 35%;
width: 35%;
padding: 0px;
border: 0px solid #a6c25c;
background-color: white;
z-index:1002;
overflow: auto;
}
.headertext{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#f19a19;
font-weight:bold;
}
.textfield
{
border:1px solid #a6c25c;
width:135px;
}
.button2
{
 background-color:#a6c25c;
 color:White;
 font-size:11px;
 font-weight:bold;
 border:1px solid #7f9db9;
 width:68px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a>
<div id="light" class="white_content">
 <table cellpadding=0 cellspacing=0 border=0 style="background-color:#a6c25c;" width="100%"><tr><td height="16px"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="close.gif" style="border :0px"  width="13px" align="right" height="13px"/></a></td></tr>
<tr><td style="padding-left:16px;padding-right:16px;padding-bottom:16px"> 
<table align="center"  border="0" cellpadding="0" cellspacing="0" style="background-color:#fff" width="100%">
<tr>
<td align="center" colspan="2" class="headertext" >Login Form Here </td>
</tr>
<tr><td>&nbsp;</td></tr>
<tr><td align="center">
<table><tr>
<td align="right">Username:</td><td><asp:TextBox ID="txtUser" runat="server" CssClass="textfield"></asp:TextBox>
</td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td align="right">Password:</td>
<td><asp:TextBox ID="txtPwd" runat="server" CssClass="textfield"></asp:TextBox></td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td> </td><td><asp:Button ID="Button1" runat="server" Text="Sign In" class="button2"/>
<asp:Button ID="Button2" runat="server" Text="Sign Up" class="button2" /></td>
</tr></table></td></tr>
<tr><td height="10px"></td></tr>
</table>
</td></tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="txtlbl" runat="server"  ></asp:Label></div>
</div>
<div id="fade" class="black_overlay"></div>
</form>
</body>
</html>

Demo:-



  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Popular Posts

  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • How to make a hit-dot game in Asp.net using Java-Script
        Introduction: Hi.. Friends, Today I explain that how to make a game in asp-dot net without using any database. Its so simple ...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...
  • How to create pikachu character using HTML & CSS
    Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project cop...
  • Auto-Hiding Navbar with Javascript
    Intoduction :-   Hii Friends... today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • How To scroll from bottom to top
    Intoduction :- Hii Friends...   Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jque...
  • How to create Animation Using HTML & CSS
    Hii Friends... Today I explain how to create Animations using HTML and CSS . you can use this code in your project copy this code and p...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • List Style
    Intoduction :-   Hii Friends... Html have 2 types of list . Ordered List and Unordered List. If you are required to put your items in a n...

Blog Archive

  • ►  2017 (13)
    • ►  December (1)
    • ►  March (5)
    • ►  February (1)
    • ►  January (6)
  • ▼  2016 (31)
    • ►  November (1)
    • ►  September (1)
    • ►  June (6)
    • ►  May (3)
    • ►  April (2)
    • ►  March (8)
    • ▼  February (9)
      • Bounce a circle with Css
      • How to make color picker
      • Calculator with Angular JS
      • Angular Directives
      • Angular Expressions
      • Angular Js Introduction
      • 3D Transform With Html or Css
      • Bootstrap Model
      • how to make a popup
    • ►  January (1)
  • ►  2015 (31)
    • ►  December (3)
    • ►  November (4)
    • ►  October (18)
    • ►  September (6)

About Me

Unknown
View my complete profile

Copyright © Asp.net modules | Powered by Blogger
Design by Sheetal Khandelwal