niceguy971
asked on
Modal Window-AJAX ---VS2010
The code for UPdatePanel is shown below. Can you please show me how to use AJAX/javascript to display Modal Window in the center of the screen when User clicks on Button1? The content of the window is in <div id="enterContactInfo"..>
How Can i control in javaScript the Text (value) property of each Textbox ?
How Can i control in javaScript the ForeGroundColor and BackGroundColor property of each Textbox ? The code is below:
-----ModalWindow.aspx----- ---------- ---------- -
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalWindow.as px.cs" Inherits="WebApplication3. ModalWindo w" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
</script>
<title>Show Modal window on click</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Some info shown HERE <br /> <br />
<br />
<asp:Button ID="Button1" runat="server" Text="Contact Info" Width="106px" UseSubmitBehavior="false"/ >
</div>
<div id="enterContactInfo" style="display:none">
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<table class="style1" runat="server" id="FormTable">
<tr>
<td colspan="2">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h1>
</h1>
<p>Enter your name and e-mail address </p>
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox ID="Name" runat="server"></asp:TextB ox>
</td>
</tr>
<tr>
<td>
E-mail address
</td>
<td>
<asp:TextBox ID="EmailAddress" runat="server"></asp:TextB ox>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
-------------------------- -----&&&&& &&&&&&&&&& &&&&&
Thanks
How Can i control in javaScript the Text (value) property of each Textbox ?
How Can i control in javaScript the ForeGroundColor and BackGroundColor property of each Textbox ? The code is below:
-----ModalWindow.aspx-----
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalWindow.as
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
</script>
<title>Show Modal window on click</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Some info shown HERE <br /> <br />
<br />
<asp:Button ID="Button1" runat="server" Text="Contact Info" Width="106px" UseSubmitBehavior="false"/
</div>
<div id="enterContactInfo" style="display:none">
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<table class="style1" runat="server" id="FormTable">
<tr>
<td colspan="2">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h1>
</h1>
<p>Enter your name and e-mail address </p>
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox ID="Name" runat="server"></asp:TextB
</td>
</tr>
<tr>
<td>
E-mail address
</td>
<td>
<asp:TextBox ID="EmailAddress" runat="server"></asp:TextB
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
--------------------------
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks
ASKER
1) Can I add OnClientClick event to the Button1? So the code for the Button1 looks like
<asp:Button ID="Button1" runat="server" Text="Contact Info" Width="106px" UseSubmitBehavior="false" OnClientClick="ShowWindowI
The code for the function ShowWindowInTheCenter():
<script type="text/javascript">
var myContactInfo = document.getElementById('e
var myName = document.getElementById('N
myName.value= ' '; // textbox Name should Not display any value at the beginning
var myEmailAddress = document.getElementById('E
myEmailAddress.value=' '; // textbox Name should Not display any value at the beginning
myContactInfo.style.displa
</script>
2) What do I need to change in the code to display window {div-->"enterContactInfo"}
So it will look like pop-up in the center of the screen..it should not cover the whole screen.
3) How can I make this pop-up window movable so the user will be able to move it?
4) How can I access the Forecolor and BackGroundColor of each textBox?
I would like to control the font color and Backgrounf color in the textBox..when the user enters the info
5) Is there something like GetFocus() event for the TextBox and how I control it in javaScript?
I'm going to Add 'Save' button And 'Cancel' button to the div-->"enterContactInfo" --the User should be able to save the info he Enters.