I am working on Lightbox that has dropdown on it. depending on ddl value div should be shown up pleae help
Code:
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterSite.master" AutoEventWireup="false" CodeFile="UsrLn.aspx.vb" Inherits="UsrLn" %>
<%@ Register TagPrefix="custom" Namespace="CustomControls" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<%--<title>Sample Launch Modal Page</title> --%>
<script src="ClientScripts/jquery-1.4.2.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="modal.css">
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
left:0;
top:0;
}
#boxes .window {
position:absolute;
width:730px;
height:600px;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
width:730px;
height:600px;
background-color: #fff;
}
#boxes #NotAMemberdialog {
width:730px;
height:600px;
background-color: #fff;
}
</style>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});
</script>
<script>
// Script to show and hide form elements based n selection of user type...
$(function() {
$('#userselector').change(function() {
$('.users').hide();
$('#' + $(this).val()).show();
});
});
</script>
<script>
$(document).ready(function() {
$('input[type="text"]').focus(function() {
if ($(this).val() == $(this).defaultValue) {
$(this).val("");
}
if ($(this).val() != $(this).defaultValue) {
$(this).select();
}
});
$('input[type="text"]').blur(function() {
if ($(this).val() == "") {
$(this).val($(this)[0].defaultValue);
}
});
});
</script>
</head>
<body>
<!-- #dialog is the id of a DIV defined in the code below -->
<p><a href="#dialog" name="modal">Log In for DoD ESI Sourcing Portal</a></p>
<p><a href="#NotAMemberdialog" name="modal">Sign up for DoD ESI Sourcing Portal</a></p>
<div id="boxes">
<!-- #customize modal window here -->
<form id="signup" name="signup" method="post">
<div id="dialog" class="window">
<!-- ############################################### -->
<a href="#" class="close"><img src="images/X.gif" width="14" height="14" alt="" border="0" style="float: right;" /></a>
<h3>Log In for DoD ESI Sourcing Portal <span style="font-size: 0.7em; font-weight: normal;">* Required</span> </h3>
<hr />
<table border="0" cellpadding="3" cellspacing="10" width="710">
<tr>
<td width="355" valign="top">
<asp:UpdatePanel ID="upnlLogonPanel" runat="server">
<ContentTemplate>
<p class="step_title"><img src="images/1.gif" width="15" height="15" alt="" border="0" /> Who Are you?*</p>
<asp:TextBox ID="txtEmail" runat="server" size="50" Text="Email*" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Email*';"/>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" Display="None"
ControlToValidate="txtEmail" ValidationGroup="CheckUser" ErrorMessage="Email Address Required" CssClass="redtxt" />
<asp:RegularExpressionValidator ID="RegExpEmailCheck" runat="server" ControlToValidate="txtEmail" CssClass="redtxt"
Display="None" ValidationGroup="CheckUser" ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
<custom:AjaxValidator Enabled="false"
id="AjaxValidator1" CssClass="redtxt"
ControlToValidate="txtEmail"
Text="Email already taken" ValidationGroup="CheckUser"
OnServerValidate="AjaxValidator1_ServerValidateEmail"
Runat="server" /><BR/>
Password*
<asp:TextBox ID="txtPassword" runat="server" TextMode="password" size="50" maxlength="15"/>
<asp:Label ID="lblMessageLabel" runat="server" />
<br />
<asp:Button id="btnLogIn" runat="server" Text="Log In" AlternateText="Log In" />
<asp:Button id="btnNotAMember" runat="server" Text="Not A Member" AlternateText="Register to be a Member" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLogIn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
<td width="355" valign="top">
<p><strong>A single destination for COTS software, services, and hardware sourcing and reporting.</strong></p>
<p>USER ROLES:<br />
Contracting Officer (KO) | <a href="#" title="This is Placeholder Text.">What is this?</a><br />
Public User | <a href="#" title="This is Placeholder Text.">What is this?</a></p>
</td>
</tr>
</table>
<!-- ############################################### -->
</div>
<div id="NotAMemberdialog" class="window">
<!-- ############################################### -->
<a href="#" class="close"><img src="Images/X.gif" width="14" height="14" alt="" border="0" style="float: right;" /></a>
<h3>Sign up for DoD ESI Sourcing Portal <span style="font-size: 0.7em; font-weight: normal;">* Required</span> </h3>
<hr />
<table border="0" cellpadding="3" cellspacing="10" width="710">
<tr>
<td width="355" valign="top">
<asp:UpdatePanel ID="upnlUserProfile" runat="server">
<ContentTemplate>
<p class="step_title"><img src="Images/1.gif" width="15" height="15" alt="" border="0" /> Who Are you?*</p>
<%-- <asp:DropDownList ID="DDLParent" runat="server" onselectedindexchanged="DDLParent_SelectedIndexChanged" Autopostback="true"> </asp:DropDownList>
--%>
<asp:DropDownList id="ddlUserSelector" runat="server"
DataSourceID="srcUserRoles" DataValueField="PortalRoleID" DataTextField="Name"
Autopostback="true" name="user_type" class="dropdown" style="margin-left: 15px;">
<%-- <asp:ListItem value="0" selected="True"> - Select - </asp:ListItem>
<asp:ListItem value="Contract_Officer">Contract Officer</asp:ListItem>
<asp:ListItem value="Public_User">Public User</asp:ListItem>--%>
</asp:DropDownList>
<asp:ObjectDataSource ID="srcUserRoles" runat="server" SelectMethod="GetPortalRoles"
TypeName="ESI.BLL.RolesBAL"></asp:ObjectDataSource>
<%-- <asp:DropDownList id="ddlUserSelector" name="user_type" class="dropdown" runat="server" style="margin-left: 15px;">
<asp:ListItem value="0" selected="True"> - Select - </asp:ListItem>
<asp:ListItem value="Contract_Officer">Contract Officer</asp:ListItem>
<asp:ListItem value="Public_User">Public User</asp:ListItem>
</asp:DropDownList>--%>
<%-- <select id="userselector" name="user_type" class="dropdown" style="margin-left: 15px;">
<option value="0" selected="selected"> - Select - </option>
<option value="Contract_Officer">Contract Officer</option>
<option value="Public_User">Public User</option>
</select> --%>
<br />
<!-- ##### -->
<div id="Contract_Officer" style="display:none" class="users" runat="server" >
<p class="step_title"><img src="Images/2.gif" width="15" height="15" alt="" border="0" /> User Information</p>
<p>This will hold the Contract Officer Form</p>
</div>
<!-- ##### -->
<div id="Public_User" style="display:none" class="users" runat="server" >
<p class="step_title"><img src="Images/2.gif" width="15" height="15" alt="" border="0" /> User Information</p>
<div id="form_block" runat = "server" style="padding: 12px; background-color: #e5eaee;">
<asp:TextBox ID="txtOrganizationName" Text="Organization*" runat="server" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Organization*';"/>
<asp:TextBox ID="txtFirstname" runat="server" Text="First Name*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='First Name*';"/>
<asp:RequiredFieldValidator ID="rfvFirstName" runat="server" Display="None"
ControlToValidate="txtFirstname" ValidationGroup="CheckUser" ErrorMessage="First Name Required" CssClass="redtxt" />
<asp:TextBox ID="txtLastname" runat="server" Text="Last Name*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Last Name*';"/>
<asp:RequiredFieldValidator ID="rfvLastname" runat="server" Display="None"
ControlToValidate="txtLastname" ValidationGroup="CheckUser" ErrorMessage="Last Name" CssClass="redtxt" />
<asp:TextBox ID="txtUserTitle" runat="server" Text="Title*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Title*';"/>
<asp:TextBox ID="txtCity" runat="server" Text="City*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='City*';"/>
<asp:dropdownlist ID="txtState" runat="server" class="dropdown">
<asp:ListItem selected="True">State*</asp:ListItem>
<asp:ListItem value="AL">Alabama</asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem value="AZ">Arizona</asp:ListItem>
<asp:ListItem value="AR">Arkansas</asp:ListItem>
<asp:ListItem value="CA">California</asp:ListItem>
<asp:ListItem value="CO">Colorado</asp:ListItem>
<asp:ListItem value="CT">Connecticut</asp:ListItem>
<asp:ListItem value="DE">Delaware</asp:ListItem>
<asp:ListItem value="DC">District of Columbia</asp:ListItem>
<asp:ListItem value="FL">Florida</asp:ListItem>
<asp:ListItem value="GA">Georgia</asp:ListItem>
<asp:ListItem value="HI">Hawaii</asp:ListItem>
<asp:ListItem value="ID">Idaho</asp:ListItem>
<asp:ListItem value="IL">Illinois</asp:ListItem>
<asp:ListItem value="IN">Indiana</asp:ListItem>
<asp:ListItem value="IA">Iowa</asp:ListItem>
<asp:ListItem value="KS">Kansas</asp:ListItem>
<asp:ListItem value="KY">Kentucky</asp:ListItem>
<asp:ListItem value="LA">Louisiana</asp:ListItem>
<asp:ListItem value="ME">Maine</asp:ListItem>
<asp:ListItem value="MD">Maryland</asp:ListItem>
<asp:ListItem value="MA">Massachusetts</asp:ListItem>
<asp:ListItem value="MI">Michigan</asp:ListItem>
<asp:ListItem value="MN">Minnesota</asp:ListItem>
<asp:ListItem value="MS">Mississippi</asp:ListItem>
<asp:ListItem value="MO">Missouri</asp:ListItem>
<asp:ListItem value="MT">Montana</asp:ListItem>
<asp:ListItem value="NE">Nebraska</asp:ListItem>
<asp:ListItem value="NV">Nevada</asp:ListItem>
<asp:ListItem value="NH">New Hampshire</asp:ListItem>
<asp:ListItem value="NJ">New Jersey</asp:ListItem>
<asp:ListItem value="NM">New Mexico</asp:ListItem>
<asp:ListItem value="NY">New York</asp:ListItem>
<asp:ListItem value="NC">North Carolina</asp:ListItem>
<asp:ListItem value="ND">North Dakota</asp:ListItem>
<asp:ListItem value="OH">Ohio</asp:ListItem>
<asp:ListItem value="OK">Oklahoma</asp:ListItem>
<asp:ListItem value="OR">Oregon</asp:ListItem>
<asp:ListItem value="PA">Pennsylvania</asp:ListItem>
<asp:ListItem value="PR">Puerto Rico</asp:ListItem>
<asp:ListItem value="RI">Rhode Island</asp:ListItem>
<asp:ListItem value="SC">South Carolina</asp:ListItem>
<asp:ListItem value="SD">South Dakota</asp:ListItem>
<asp:ListItem value="TN">Tennessee</asp:ListItem>
<asp:ListItem value="TX">Texas</asp:ListItem>
<asp:ListItem value="UT">Utah</asp:ListItem>
<asp:ListItem value="VT">Vermont</asp:ListItem>
<asp:ListItem value="VI">Virgin Islands</asp:ListItem>
<asp:ListItem value="VA">Virginia</asp:ListItem>
<asp:ListItem value="WA">Washington</asp:ListItem>
<asp:ListItem value="WV">West Virginia</asp:ListItem>
<asp:ListItem value="WI">Wisconsin</asp:ListItem>
<asp:ListItem value="WY">Wyoming</asp:ListItem>
</asp:dropdownlist>
<asp:TextBox ID="txtZipCode" runat="server" Text="Zip*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Zip*';"/>
<asp:TextBox ID="txtPhone" runat="server" Text="Phone*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Phone*';"/>
<asp:TextBox ID="TextBox1" runat="server" size="50" Text="Email*" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Email*';"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None"
ControlToValidate="txtEmail" ValidationGroup="CheckUser" ErrorMessage="Email Address Required" CssClass="redtxt" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail" CssClass="redtxt"
Display="None" ValidationGroup="CheckUser" ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
<custom:AjaxValidator Enabled="false"
id="AjaxValidator2" CssClass="redtxt"
ControlToValidate="txtEmail"
Text="Email already taken" ValidationGroup="CheckUser"
OnServerValidate="AjaxValidator1_ServerValidateEmail"
Runat="server" /><BR/>
Password*
<asp:TextBox ID="TextBox2" runat="server" TextMode="password" size="50" maxlength="15"/>
Confirm Password*
<asp:TextBox ID="txtReenterPassword" TextMode="password" runat="server" size="50" maxlength="15"/>
<asp:CompareValidator id="cvPassword" ValidationGroup="CheckUser" Display="None" ControlToValidate="txtPassword"
ControlToCompare="txtReenterPassword" CssClass="redtxt" EnableClientScript="false" Text="Password Validation Failed!"
runat="server" />
</div>
<br />
<asp:Button id="btnSubmit" runat="server" ValidationGroup="CheckUser" Text="Continue" AlternateText="Submit" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
<td width="355" valign="top">
<p><strong>A single destination for COTS software, services, and hardware sourcing and reporting.</strong></p>
<p>USER ROLES:<br />
Contracting Officer (KO) | <a href="#" title="This is Placeholder Text.">What is this?</a><br />
Public User | <a href="#" title="This is Placeholder Text.">What is this?</a></p>
</td>
</tr>
</table>
<!-- ############################################### -->
</div>
</form>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
</body>
</html>
</asp:Content>