.NET Tutorials, Forums, Interview Questions And Answers
  Home | Tutorial | Articles | Forum | Interview Question | Code Snippets | News | Fun Zone | Poll | Web Links | Certification | Search
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!

Home >> Forum >> ASP.Net >> Post New QuestionBookmark and Share Subscribe to Forum

Creating modal poup using javasccript

Posted By: ashfaq     Posted Date: November 01, 2008    Points:2   Category :ASP.Net
How to create modal pop-up window using Javascript in asp.net?

Responses
Author: Rahul          Company URL:           
Posted Date: November 02, 2008     Points: 5   

Check out this link

http://javascript.about.com/library/blmodald3.htm

Author: Athira Sreejith          Company URL: http://mgu.ac.in/           
Posted Date: April 01, 2009     Points: 5   

Hi..

Ajax ModelPopUpExtnder code example in ASP.NET.

Design:

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function ok(sender, e)
{
$find('ModalPopupExtenderLogin').hide();
__doPostBack('LoginBtn', e);
}
function okJoin(sender, e)
{
$find('ModalPopupExtenderSignup').hide();
__doPostBack('JoinBtn', e);
}
function OnKeyPress(args)
{
if(args.keyCode == Sys.UI.Key.esc)
{
$find("ModalPopupExtenderLogin").hide();
}
}
function body_onkeydown()
{
if(event.keyCode==13 || event.keyCode==27)
{
var _defaultButtonName=getDefautButtonName( event.keyCode==13 ? "submitButton" : "cancelButton");
var frm=document.forms[0];
if(frm && document.all(_defaultButtonName))
{
document.all(_defaultButtonName).click();
}
}
}

function getDefautButtonName(className)
{
var _defaultButtonName="";
var children = document.getElementsByTagName("input");
for (var i = 0; i < children.length; i++)
{
var child = children[i];
var btnAction = child.buttonAction;
if(btnAction == className)
{
_defaultButtonName = child.id;
break;
}
}
return _defaultButtonName;
}


</script>
</head>
<body onkeydown="body_onkeydown()">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
&nbsp;
<br />
<table style="width: 297px">
<tr>
<td style="width: 36px">
<asp:LinkButton ID="Loginlnk" runat="server" Width="47px">Login</asp:LinkButton></td>
<td>
<asp:LinkButton ID="Signuplnk" runat="server">Sign Up</asp:LinkButton></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="successLabel" runat="server" Width="273px" Visible="False"></asp:Label></td>
</tr>
</table>
<br />
<div>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderLogin" runat="server"
TargetControlID="Loginlnk"
PopupControlID="LoginPanel"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="LoginBtn"
OnOkScript="ok()"
CancelControlID="CancelBtn" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderSignup" runat="server"
TargetControlID="Signuplnk"
PopupControlID="SignupPanel"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="JoinBtn"
OnOkScript="okJoin()"
CancelControlID="CancelBtn2" />
<br />
<br />
<asp:Panel ID="LoginPanel" runat="server" CssClass="modalPopup" Style="display: none" Width="278px" Font-Names="@MS PGothic">

<table style="width: 270px">
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label10" runat="server" Height="23px" Text="UserName :"></asp:Label>
</td>
<td style="width: 179px" >
<asp:TextBox ID="loginId" runat="server" Width="75%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label9" runat="server" Height="23px" Text="Password :"></asp:Label>
</td>
<td style="width: 179px">
<asp:TextBox ID="pwd" runat="server" Width="75%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 94px">
</td>
<td style="width: 179px">
&nbsp; &nbsp; &nbsp;
<asp:Button ID="CancelBtn" runat="server" Text="Cancel" Width="52px" buttonAction="submitButton" />
<asp:Button ID="LoginBtn" runat="server" Text="Log In" OnClick="LoginBtn_Click" buttonAction="cancelButton" /></td>
</tr>
</table>
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</asp:Panel>
<br />
<asp:Panel ID="SignUpPanel" runat="server" CssClass="modalSignUp" Style="display: none" Width="539px" Font-Names="@MS PGothic">
<span style="color: #cc0000"><strong><span style="color: dimgray">Welcome to ModalPopupExtender.com<br />
</span></strong><br />
</span>
To begin, please complete the registration form below. Note that this content
is
only available to users located in the United States.If you already have an account, you can also <span style="color: dimgray"><span>
login</span> </span>
above.
<br />
<table style="width: 452px; height: 177px;" Align="center">
<tr>
<td colspan="2" style="height: 21px">
</td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label1" runat="server" Height="23px" Text="Choose username :"></asp:Label>
</td>
<td style="width: 179px" >
<asp:TextBox ID="txtUserName" runat="server" Width="100%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30%" align="right">
<asp:Label ID="Label2" runat="server" Height="23px" Text="Password :"></asp:Label></td>
<td style="width: 179px">
<asp:TextBox ID="txtPassword" runat="server" Width="100%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label3" runat="server" Height="23px" Text="Confirm password :"></asp:Label>
</td>
<td style="width: 179px">
<asp:TextBox ID="txtConfirmPassword" runat="server" Width="100%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label4" runat="server" Height="23px" Text="Email address:"></asp:Label></td>
<td style="width: 179px">
<asp:TextBox ID="txtEmailAddress" runat="server" Width="100%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label6" runat="server" Height="23px" Text="First Name:"></asp:Label></td>
<td style="width: 179px">
<asp:TextBox ID="txtFirstName" runat="server" Width="100%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label7" runat="server" Height="23px" Text="Last Name :"></asp:Label></td>
<td style="width: 179px">
<asp:TextBox ID="txtLastName" runat="server" Width="100%"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="Label5" runat="server" Height="23px" Text="Zipcode:"></asp:Label></td>
<td style="width: 179px">
<asp:TextBox ID="txtZipcode" runat="server" Width="100%"></asp:TextBox></td>
</tr>
<tr>
<td align="right" style="width: 30%; height: 18px">
<asp:Label ID="Label8" runat="server" Height="23px" Text="Gender:"></asp:Label></td>
<td style="width: 179px; height: 18px">
<asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" Height="19px">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList></td>
</tr>
<tr>
<td style="width: 104px; height: 26px;">
</td>
<td style="width: 179px; height: 26px;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<asp:Button ID="CancelBtn2" runat="server" Text="Cancel" Width="52px" />
<asp:Button ID="JoinBtn" runat="server" Text="Join" OnClick="JoinBtn_Click" /></td>
</tr>
</table>
&nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;


</asp:Panel>
</div>
</form>
</body>
</html>



.csPage:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void LoginBtn_Click(object sender, EventArgs e)
{
//Add your DB Authentication Module here....
//This is just for testing
if (loginId.Text.Equals("user") && pwd.Text.Equals("user"))
successLabel.Text = "Welcome User";
else
successLabel.Text = "Authentication Failed...Retry";
successLabel.Visible = true;
Loginlnk.Visible = false;
Signuplnk.Visible = true;
}


protected void JoinBtn_Click(object sender, EventArgs e)
{
//Add your DB layer to store information for signIn user module here....
//This is just for testing
if (txtUserName.Text.Equals("user") && txtPassword.Text.Equals("user"))
{
successLabel.Text = "SignIn Successful";
//Response.Write(txtFirstName.Text +" "+txtLastName.Text+ "<br/>");
//Response.Write(txtEmailAddress.Text);
}
else
successLabel.Text = "Missing information...Retry";
successLabel.Visible = true;
Signuplnk.Visible = false;
Loginlnk.Visible = true;
}
}



Post Reply

You must Sign In To post reply
 

Related Questions Related Questions

Latest Forum Questions From The Same Category

 
Find more Forum Questions on C#, ASP.Net, Vb.Net, SQL Server and more Here
Quick Links For Forum Categories:
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  OOPs  SilverlightIISJQuery
JavaScript/VBScriptBiztalkWPFPatten/PracticesWCFOthers
www.DotNetSpark.comUnAnsweredAll

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend